b2894lxlx/yunxinwei-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

第一次提交

Browse Source
This commit is contained in:
gxwebsoft
2023-08-04 13:04:21 +08:00
commit 7a73b38bd5
764 changed files with 166417 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
pages/groupon/goods/components/SkuPopup.vue Executable file
View File

@@ -0,0 +1,214 @@
<template>
<goods-sku-popup :value="value" @input="onChangeValue" border-radius="20" :localdata="goodsInfo" :mode="skuMode" :maskCloseAble="true"
:priceColor="appTheme.mainBg" :buyNowBackgroundColor="appTheme.mainBg" :addCartColor="appTheme.viceText" :addCartBackgroundColor="appTheme.viceBg"
:activedStyle="{ color: appTheme.mainBg, borderColor: appTheme.mainBg, backgroundColor: activedBtnBackgroundColor }"
@open="openSkuPopup" @close="closeSkuPopup" @buy-now="buyNow" buyNowText="立即购买" :maxBuyNum="maxBuyNum" :buyMode="buyMode" :isJoin="!!taskId"
:stepPeople="stepPeople" />
</template>
<script>
import { hex2rgba } from '@/utils/color'
import * as TaskApi from '@/api/bargain/task'
import GoodsSkuPopup from './goods-sku-popup'
export default {
components: {
GoodsSkuPopup
},
model: {
prop: 'value',
event: 'input'
},
props: {
// 显示隐藏
value: {
Type: Boolean,
default: false
},
// 模式 1:都显示 2:只显示购物车 3:只显示立即购买
skuMode: {
type: Number,
default: 1
},
// 商品详情信息
goods: {
type: Object,
default: {}
},
// 购买模式 1:拼团购买 2:单独购买
buyMode: {
type: Number,
default: 1
},
// 拼单ID (仅参与拼单时传入)
taskId: {
type: Number,
default: undefined
},
// 阶梯团人数 (仅参与拼单时传入)
stepPeople: {
type: Number,
default: undefined
},
},
computed: {
// 规格按钮选中时的背景色
activedBtnBackgroundColor() {
return hex2rgba(this.appTheme.mainBg, 0.1)
}
},
watch: {
buyMode(val) {
this.init()
}
},
data() {
return {
// 商品信息
goodsInfo: {},
// 限购数量
maxBuyNum: null
}
},
created() {
this.init()
},
methods: {
// 初始化SKU数据
init() {
const app = this
const { goods } = app
app.goodsInfo = {
_id: goods.goods_id,
name: goods.goods_name,
goods_thumb: goods.goods_image,
sku_list: app.getSkuList(),
spec_list: app.getSpecList(),
active_type: goods.active_type,
steps_config: goods.steps_config,
}
app.maxBuyNum = app.getMaxBuyNum()
},
// 监听组件显示隐藏
onChangeValue(val) {
this.$emit('input', val)
},
// 整理商品SKU列表
getSkuList() {
const app = this
const { goods: { goods_name, goods_image, skuList } } = app
const skuData = []
skuList.forEach(item => {
skuData.push({
_id: item.id,
goods_sku_id: item.goods_sku_id,
goods_id: item.goods_id,
goods_name: goods_name,
image: item.image_url ? item.image_url : goods_image,
price: item.groupon_price,
stock: item.stock_num,
spec_value_ids: item.spec_value_ids,
sku_name_arr: app.getSkuNameArr(item.spec_value_ids),
groupon_price: item.groupon_price,
original_price: item.original_price,
steps_price_config: item.steps_price_config,
})
})
return skuData
},
// 获取sku记录的规格值列表
getSkuNameArr(specValueIds) {
const app = this
const defaultData = ['默认']
const skuNameArr = []
if (specValueIds) {
specValueIds.forEach((valueId, groupIndex) => {
const specValueName = app.getSpecValueName(valueId, groupIndex)
skuNameArr.push(specValueName)
})
}
return skuNameArr.length ? skuNameArr : defaultData
},
// 获取指定的规格值名称
getSpecValueName(valueId, groupIndex) {
const app = this
const { goods: { specList } } = app
const res = specList[groupIndex].valueList.find(specValue => {
return specValue.spec_value_id == valueId
})
return res.spec_value
},
// 整理规格数据
getSpecList() {
const { goods: { specList, steps_config } } = this
const defaultData = [{ name: '默认', list: [{ name: '默认' }] }]
const specData = []
specList.forEach(group => {
const children = []
group.valueList.forEach(specValue => {
children.push({ name: specValue.spec_value })
})
specData.push({
name: group.spec_name,
list: children
})
})
return specData.length ? specData : defaultData
},
// 限购数量
getMaxBuyNum() {
const { goods, buyMode } = this
return (buyMode == 1 && goods.is_restrict) ? goods.restrict_single : null
},
// sku组件 开始-----------------------------------------------------------
openSkuPopup() {
// console.log("监听 - 打开sku组件")
},
closeSkuPopup() {
// console.log("监听 - 关闭sku组件")
},
// 立即购买
buyNow(selectShop) {
const app = this
// 跳转到订单结算页
app.$navTo('pages/checkout/index', app.getOrderParam(selectShop))
// 隐藏当前弹窗
app.onChangeValue(false)
},
// 生成下单参数
getOrderParam(selectShop) {
const { goods, buyMode, taskId } = this
const param = {
goodsSkuId: selectShop.goods_sku_id,
goodsNum: selectShop.buy_num
}
if (buyMode == 1) {
param.mode = 'groupon'
param.grouponGoodsId = goods.groupon_goods_id
param.taskId = taskId
param.stepPeople = selectShop.stepPeople
} else {
param.mode = 'buyNow'
param.goodsId = goods.goods_id
}
return param
}
}
}
</script>
<style lang="scss" scoped>
</style>

193
pages/groupon/goods/components/TaskList.vue Executable file
View File

@@ -0,0 +1,193 @@
<template>
<!-- 进行中的团购 -->
<view v-if="list.length" class="goods-task m-top20" :style="appThemeStyle">
<view class="item-title dis-flex">
<view class="block-left flex-box">
<text>进行中的团购</text>
</view>
<view class="block-right">
<text class="iconfont icon-arrow-right col-9" @click="onShowMore()"></text>
</view>
</view>
<!-- 拼单列表 -->
<view class="task-list">
<view class="task-item" v-for="(item, index) in list" :key="index">
<view class="user-info">
<avatar-image class="user-avatar" :url="item.user.avatar_url" :width="60" />
<text class="user-name oneline-hide">{{ item.user.nick_name }}</text>
</view>
<view class="task-status">
<view class="people">
<text>还差</text>
<text class="col-m">{{ item.surplus_people }}人</text>
<text>成团</text>
</view>
<view class="count-down">
<text>剩余</text>
<count-down :date="item.end_time" separator="colon" theme="text" />
</view>
</view>
<view class="item-action">
<view class="button" @click="onTargetTask(item.task_id)">去参团</view>
</view>
</view>
</view>
<!-- 更多拼单弹窗 -->
<u-modal v-model="showMore" title="可参与的拼单">
<scroll-view style="max-height: 610rpx; touch-action: none;" :scroll-y="true">
<view class="pops-content">
<view class="task-item" v-for="(item, index) in moreList" :key="index">
<view class="user-info">
<avatar-image class="user-avatar" :url="item.user.avatar_url" :width="60" />
<text class="user-name oneline-hide">{{ item.user.nick_name }}</text>
</view>
<view class="item-action">
<view class="button" @click="onTargetTask(item.task_id)">去参团</view>
</view>
</view>
</view>
</scroll-view>
</u-modal>
</view>
</template>
<script>
import AvatarImage from '@/components/avatar-image'
import CountDown from '@/components/countdown'
import * as TaskApi from '@/api/groupon/task'
export default {
components: {
AvatarImage,
CountDown
},
props: {
// 拼团商品ID
grouponGoodsId: {
type: Number,
default: null
},
// 商品ID
list: {
type: Array,
default: []
}
},
data() {
return {
// 显示更多拼单
showMore: false,
// 更多拼单列表
moreList: []
}
},
methods: {
// 显示更多拼单
onShowMore() {
const app = this
if (!app.moreList.length) {
TaskApi.listByGoods(app.grouponGoodsId)
.then(result => {
app.moreList = result.data.list
app.showMore = true
})
} else {
app.showMore = true
}
},
// 跳转到评论列表页
onTargetTask(taskId) {
this.$navTo('pages/groupon/task/index', { taskId })
}
}
}
</script>
<style lang="scss" scoped>
.goods-task {
padding: 20rpx 30rpx;
background-color: #fff;
}
.item-title {
font-size: 28rpx;
margin-bottom: 24rpx;
}
.task-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 6rpx;
margin-bottom: 32rpx;
&:last-child {
margin-bottom: 0 !important;
border-bottom: none;
}
}
.user-info {
width: 260rpx;
display: flex;
align-items: center;
.user-avatar {
margin-right: 10rpx;
}
.user-name {
font-size: 28rpx;
}
}
.task-status {
width: 250rpx;
padding-left: 36rpx;
font-size: 26rpx;
.people {
margin-bottom: 10rpx;
}
.count-down {
display: flex;
color: #999;
font-size: 24rpx;
}
}
.item-action {
.button {
padding: 0 24rpx;
line-height: 52rpx;
text-align: center;
font-size: 28rpx;
border-radius: 40rpx;
color: #fff;
background: $main-bg;
}
}
// 更多拼单
.pops-content {
padding: 40rpx 30rpx;
.task-item {
margin-bottom: 44rpx;
}
.user-avatar {
margin-right: 30rpx;
}
}
</style>

1453
pages/groupon/goods/components/goods-sku-popup/index.vue Executable file
View File

File diff suppressed because it is too large Load Diff

450
pages/groupon/goods/components/goods-sku-popup/number-box/index.vue Executable file
View File

@@ -0,0 +1,450 @@
<!-- 步进器 -->
<template>
<view class="number-box">
<view class="u-icon-minus" @touchstart.prevent="btnTouchStart('minus')" @touchend.stop.prevent="clearTimer" :class="{ 'u-icon-disabled': disabled || inputVal <= min }"
:style="{
background: bgColor,
height: inputHeight + 'rpx',
color: color,
fontSize: size + 'rpx',
minHeight: '1.4em'
}">
<view :style="'font-size:'+(Number(size)+10)+'rpx'" class="num-btn">－</view>
</view>
<input :disabled="disabledInput || disabled" :cursor-spacing="getCursorSpacing" :class="{ 'u-input-disabled': disabled }"
v-model="inputVal" class="u-number-input" @blur="onBlur"
type="number" :style="{
color: color,
fontSize: size + 'rpx',
background: bgColor,
height: inputHeight + 'rpx',
width: inputWidth + 'rpx',
}" />
<view class="u-icon-plus" @touchstart.prevent="btnTouchStart('plus')" @touchend.stop.prevent="clearTimer" :class="{ 'u-icon-disabled': disabled || inputVal >= max }"
:style="{
background: bgColor,
height: inputHeight + 'rpx',
color: color,
fontSize: size + 'rpx',
minHeight: '1.4em',
}">
<view :style="'font-size:'+(Number(size)+10)+'rpx'" class="num-btn">＋</view>
</view>
</view>
</template>
<script>
/**
* numberBox 步进器
* @description 该组件一般用于商城购物选择物品数量的场景。注意：该输入框只能输入大于或等于0的整数，不支持小数输入
* @tutorial https://www.uviewui.com/components/numberBox.html
* @property {Number} value 输入框初始值（默认1）
* @property {String} bg-color 输入框和按钮的背景颜色（默认#F2F3F5）
* @property {Number} min 用户可输入的最小值（默认0）
* @property {Number} max 用户可输入的最大值（默认99999）
* @property {Number} step 步长，每次加或减的值（默认1）
* @property {Number} stepFirst 步进值，首次增加或最后减的值(默认step值和一致）
* @property {Boolean} disabled 是否禁用操作，禁用后无法加减或手动修改输入框的值（默认false）
* @property {Boolean} disabled-input 是否禁止输入框手动输入值（默认false）
* @property {Boolean} positive-integer 是否只能输入正整数（默认true）
* @property {String | Number} size 输入框文字和按钮字体大小，单位rpx（默认26）
* @property {String} color 输入框文字和加减按钮图标的颜色（默认#323233）
* @property {String | Number} input-width 输入框宽度，单位rpx（默认80）
* @property {String | Number} input-height 输入框和按钮的高度，单位rpx（默认50）
* @property {String | Number} index 事件回调时用以区分当前发生变化的是哪个输入框
* @property {Boolean} long-press 是否开启长按连续递增或递减(默认true)
* @property {String | Number} press-time 开启长按触发后，每触发一次需要多久，单位ms(默认250)
* @property {String | Number} cursor-spacing 指定光标于键盘的距离，避免键盘遮挡输入框，单位rpx（默认200）
* @event {Function} change 输入框内容发生变化时触发，对象形式
* @event {Function} blur 输入框失去焦点时触发，对象形式
* @event {Function} minus 点击减少按钮时触发(按钮可点击情况下)，对象形式
* @event {Function} plus 点击增加按钮时触发(按钮可点击情况下)，对象形式
* @example <number-box :min="1" :max="100"></number-box>
*/
export default {
name: "NumberBox",
emits: ["update:modelValue", "input", "change", "blur", "plus", "minus"],
props: {
// 预显示的数字
value: {
type: Number,
default: 1
},
modelValue: {
type: Number,
default: 1
},
// 背景颜色
bgColor: {
type: String,
default: '#F2F3F5'
},
// 最小值
min: {
type: Number,
default: 0
},
// 最大值
max: {
type: Number,
default: 99999
},
// 步进值，每次加或减的值
step: {
type: Number,
default: 1
},
// 步进值，首次增加或最后减的值
stepFirst: {
type: Number,
default: 0
},
// 是否只能输入 step 的倍数
stepStrictly: {
type: Boolean,
default: false
},
// 是否禁用加减操作
disabled: {
type: Boolean,
default: false
},
// input的字体大小，单位rpx
size: {
type: [Number, String],
default: 26
},
// 加减图标的颜色
color: {
type: String,
default: '#323233'
},
// input宽度，单位rpx
inputWidth: {
type: [Number, String],
default: 80
},
// input高度，单位rpx
inputHeight: {
type: [Number, String],
default: 50
},
// index索引，用于列表中使用，让用户知道是哪个numberbox发生了变化，一般使用for循环出来的index值即可
index: {
type: [Number, String],
default: ''
},
// 是否禁用输入框，与disabled作用于输入框时，为OR的关系，即想要禁用输入框，又可以加减的话
// 设置disabled为false，disabledInput为true即可
disabledInput: {
type: Boolean,
default: false
},
// 输入框于键盘之间的距离
cursorSpacing: {
type: [Number, String],
default: 100
},
// 是否开启长按连续递增或递减
longPress: {
type: Boolean,
default: true
},
// 开启长按触发后，每触发一次需要多久
pressTime: {
type: [Number, String],
default: 250
},
// 是否只能输入大于或等于0的整数(正整数)
positiveInteger: {
type: Boolean,
default: true
}
},
watch: {
value(v1, v2) {
// 只有value的改变是来自外部的时候，才去同步inputVal的值，否则会造成循环错误
if(!this.changeFromInner) {
this.inputVal = v1;
// 因为inputVal变化后，会触发this.handleChange()，在其中changeFromInner会再次被设置为true，
// 造成外面修改值，也导致被认为是内部修改的混乱，这里进行this.$nextTick延时，保证在运行周期的最后处
// 将changeFromInner设置为false
this.$nextTick(function(){
this.changeFromInner = false;
})
}
},
modelValue(v1, v2) {
// 只有value的改变是来自外部的时候，才去同步inputVal的值，否则会造成循环错误
if(!this.changeFromInner) {
this.inputVal = v1;
// 因为inputVal变化后，会触发this.handleChange()，在其中changeFromInner会再次被设置为true，
// 造成外面修改值，也导致被认为是内部修改的混乱，这里进行this.$nextTick延时，保证在运行周期的最后处
// 将changeFromInner设置为false
this.$nextTick(function(){
this.changeFromInner = false;
})
}
},
inputVal(v1, v2) {
// 为了让用户能够删除所有输入值，重新输入内容，删除所有值后，内容为空字符串
if (v1 == '') return;
let value = 0;
// 首先判断是否数值，并且在min和max之间，如果不是，使用原来值
let tmp = this.isNumber(v1);
if (tmp && v1 >= this.min && v1 <= this.max) value = v1;
else value = v2;
// 判断是否只能输入大于等于0的整数
if(this.positiveInteger) {
// 小于0，或者带有小数点，
if(v1 < 0 || String(v1).indexOf('.') !== -1) {
value = v2;
// 双向绑定input的值，必须要使用$nextTick修改显示的值
this.$nextTick(() => {
this.inputVal = v2;
})
}
}
// 发出change事件
this.handleChange(value, 'change');
},
min(v1){
if(v1 !== undefined && v1!="" && this.getValue() < v1){
this.$emit("input",v1);
}
},
max(v1){
if(v1 !== undefined && v1!="" && this.getValue() > v1){
this.$emit("input",v1);
}
}
},
data() {
return {
inputVal: 1, // 输入框中的值，不能直接使用props中的value，因为应该改变props的状态
timer: null, // 用作长按的定时器
changeFromInner: false, // 值发生变化，是来自内部还是外部
innerChangeTimer: null, // 内部定时器
};
},
created() {
this.inputVal = Number(this.getValue());
},
computed: {
getCursorSpacing() {
// 先将值转为px单位，再转为数值
return Number(uni.upx2px(this.cursorSpacing));
}
},
methods: {
getValue(){
// #ifndef VUE3
return this.value;
// #endif
// #ifdef VUE3
return this.modelValue;
// #endif
},
// 点击退格键
btnTouchStart(callback) {
// 先执行一遍方法，否则会造成松开手时，就执行了clearTimer，导致无法实现功能
this[callback]();
// 如果没开启长按功能，直接返回
if (!this.longPress) return;
clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
this.timer = null;
this.timer = setInterval(() => {
// 执行加或减函数
this[callback]();
}, this.pressTime);
},
clearTimer() {
this.$nextTick(() => {
clearInterval(this.timer);
this.timer = null;
})
},
minus() {
this.computeVal('minus');
},
plus() {
this.computeVal('plus');
},
// 为了保证小数相加减出现精度溢出的问题
calcPlus(num1, num2) {
let baseNum, baseNum1, baseNum2;
try {
baseNum1 = num1.toString().split('.')[1].length;
} catch (e) {
baseNum1 = 0;
}
try {
baseNum2 = num2.toString().split('.')[1].length;
} catch (e) {
baseNum2 = 0;
}
baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2; //精度
return ((num1 * baseNum + num2 * baseNum) / baseNum).toFixed(precision);
},
// 为了保证小数相加减出现精度溢出的问题
calcMinus(num1, num2) {
let baseNum, baseNum1, baseNum2;
try {
baseNum1 = num1.toString().split('.')[1].length;
} catch (e) {
baseNum1 = 0;
}
try {
baseNum2 = num2.toString().split('.')[1].length;
} catch (e) {
baseNum2 = 0;
}
baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2;
return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision);
},
computeVal(type) {
uni.hideKeyboard();
if (this.disabled) return;
let value = 0;
// 新增stepFirst开始
// 减
if (type === 'minus') {
if(this.stepFirst > 0 && this.inputVal == this.stepFirst){
value = this.min;
}else{
value = this.calcMinus(this.inputVal, this.step);
}
} else if (type === 'plus') {
if(this.stepFirst > 0 && this.inputVal < this.stepFirst){
value = this.stepFirst;
}else{
value = this.calcPlus(this.inputVal, this.step);
}
}
if(this.stepStrictly){
let strictly = value % this.step;
if(strictly > 0){
value -= strictly;
}
}
if (value > this.max ) {
value = this.max;
}else if (value < this.min) {
value = this.min;
}
// 新增stepFirst结束
this.inputVal = value;
this.handleChange(value, type);
},
// 处理用户手动输入的情况
onBlur(event) {
let val = 0;
let value = event.detail.value;
// 如果为非0-9数字组成，或者其第一位数值为0，直接让其等于min值
// 这里不直接判断是否正整数，是因为用户传递的props min值可能为0
if (!/(^\d+$)/.test(value) || value[0] == 0) val = this.min;
val = +value;
// 新增stepFirst开始
if(this.stepFirst > 0 && this.inputVal < this.stepFirst && this.inputVal>0){
val = this.stepFirst;
}
// 新增stepFirst结束
if(this.stepStrictly){
let strictly = val % this.step;
if(strictly > 0){
val -= strictly;
}
}
if (val > this.max) {
val = this.max;
} else if (val < this.min) {
val = this.min;
}
this.$nextTick(() => {
this.inputVal = val;
})
this.handleChange(val, 'blur');
},
handleChange(value, type) {
if (this.disabled) return;
// 清除定时器，避免造成混乱
if(this.innerChangeTimer) {
clearTimeout(this.innerChangeTimer);
this.innerChangeTimer = null;
}
// 发出input事件，修改通过v-model绑定的值，达到双向绑定的效果
this.changeFromInner = true;
// 一定时间内，清除changeFromInner标记，否则内部值改变后
// 外部通过程序修改value值，将会无效
this.innerChangeTimer = setTimeout(() => {
this.changeFromInner = false;
}, 150);
this.$emit('input', Number(value));
this.$emit("update:modelValue", Number(value));
this.$emit(type, {
// 转为Number类型
value: Number(value),
index: this.index
})
},
/**
* 验证十进制数字
*/
isNumber(value) {
return /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value)
}
}
};
</script>
<style lang="scss" scoped>
.number-box {
display: inline-flex;
align-items: center;
}
.u-number-input {
position: relative;
text-align: center;
padding: 0;
margin: 0 6rpx;
display: flex;
align-items: center;
justify-content: center;
}
.u-icon-plus,
.u-icon-minus {
width: 60rpx;
display: flex;
justify-content: center;
align-items: center;
}
.u-icon-plus {
border-radius: 0 8rpx 8rpx 0;
}
.u-icon-minus {
border-radius: 8rpx 0 0 8rpx;
}
.u-icon-disabled {
color: #c8c9cc !important;
background: #f7f8fa !important;
}
.u-input-disabled {
color: #c8c9cc !important;
background-color: #f2f3f5 !important;
}
.num-btn{
font-weight:550;
position: relative;
top:-4rpx;
}
</style>

382
pages/groupon/goods/index.vue Executable file
View File

@@ -0,0 +1,382 @@
<template>
<view v-show="!isLoading" class="container" :style="appThemeStyle">
<!-- 商品图片轮播 -->
<SlideImage v-if="!isLoading" :video="goods.video" :videoCover="goods.videoCover" :images="goods.goods_images" />
<!-- 商品信息 -->
<view v-if="!isLoading" class="goods-info m-top20">
<!-- 价格、销量 -->
<view class="info-item info-item__top dis-flex flex-x-between flex-y-end">
<view class="block-left dis-flex flex-y-center">
<view class="active-tag">
<text>{{ goods.active_type != ActiveTypeEnum.NORMAL.value ? ActiveTypeEnum[goods.active_type].name2 : '多人拼团' }}</text>
</view>
<!-- 拼团价 -->
<text class="floor-price__samll">￥</text>
<text class="floor-price">{{ goods.groupon_price }}</text>
<!-- 商品原价 -->
<text class="original-price">￥{{ goods.original_price }}</text>
</view>
<view class="block-right dis-flex">
<!-- 销量 -->
<view class="goods-sales">
<text>已抢{{ goods.active_sales }}件</text>
</view>
</view>
</view>
<!-- 标题、分享 -->
<view class="info-item info-item__name dis-flex flex-y-center">
<view class="goods-name flex-box">
<text class="twoline-hide">{{ goods.goods_name }}</text>
</view>
<view class="goods-share__line"></view>
<view class="goods-share">
<button class="share-btn dis-flex flex-dir-column" @click="onShowShareSheet()">
<text class="share__icon iconfont icon-fenxiang"></text>
<text class="f-24">分享</text>
</button>
</view>
</view>
<!-- 商品卖点 -->
<view v-if="goods.selling_point" class="info-item info-item_selling-point">
<text>{{ goods.selling_point }}</text>
</view>
<!-- 活动倒计时 -->
<view v-if="goods.active_status != ActiveStatusEnum.STATE_END.value" class="info-item info-item_status info-item_countdown dis-flex flex-y-center">
<text class="countdown-icon iconfont icon-naozhong"></text>
<text>距离拼团活动{{ goods.active_status == ActiveStatusEnum.STATE_SOON.value ? '开始' : '结束' }}</text>
<text class="m-r-10">还剩</text>
<count-down :date="goods.end_time" separator="zh" theme="text" />
</view>
<!-- 活动已结束 -->
<view v-else class="info-item info-item_status info-item_end">
<text class="countdown-icon iconfont icon-naozhong"></text>
<text>拼团活动已结束，下次记得早点来哦~</text>
</view>
</view>
<!-- 凑团信息 -->
<TaskList v-if="!isLoading" :grouponGoodsId="goods.groupon_goods_id" :list="goods.taskQuickJoinList" />
<!-- 选择商品规格 -->
<view v-if="goods.spec_type == 20" class="goods-choice m-top20 b-f" @click="onShowSkuPopup(1)">
<view class="spec-list">
<view class="flex-box">
<text class="col-8">选择：</text>
<text class="spec-name" v-for="(item, index) in goods.specList" :key="index">{{ item.spec_name }}</text>
</view>
<view class="f-26 col-9 t-r">
<text class="iconfont icon-arrow-right"></text>
</view>
</view>
</view>
<!-- 拼团玩法 -->
<view class="rule-nav m-top20 b-f" @click="handleShowRules()">
<view class="top-nav dis-flex flex-x-between">
<text>拼团玩法</text>
<text class="f-25 col-9">查看规则</text>
</view>
<!-- 拼团步骤 -->
<view class="rule-simple dis-flex flex-x-around">
<view class="simple-item dis-flex flex-dir-column flex-y-center">
<view class="i-number dis-flex flex-x-center flex-y-center">
<text class="f-30">1</text>
</view>
<view class="i-text f-28">选择商品</view>
</view>
<view class="simple-item dis-flex flex-dir-column flex-y-center">
<view class="i-number dis-flex flex-x-center flex-y-center">
<text class="f-30">2</text>
</view>
<view class="i-text f-28">开团/参团</view>
</view>
<view class="simple-item dis-flex flex-dir-column flex-y-center">
<view class="i-number dis-flex flex-x-center flex-y-center">
<text class="f-30">3</text>
</view>
<view class="i-text f-28">邀请好友</view>
</view>
<view class="simple-item dis-flex flex-dir-column flex-y-center">
<view class="i-number dis-flex flex-x-center flex-y-center">
<text class="f-30">4</text>
</view>
<view class="i-text f-28">人满成团</view>
</view>
</view>
</view>
<!-- 商品SKU弹窗 -->
<SkuPopup v-if="!isLoading" v-model="showSkuPopup" :skuMode="skuMode" :goods="goods" :buyMode="buyMode" />
<!-- 商品评价 -->
<Comment v-if="!isLoading" :goods-id="goods.goods_id" :limit="2" />
<!-- 商品描述 -->
<view v-if="!isLoading" class="goods-content m-top20">
<view class="item-title b-f">
<text>商品描述</text>
</view>
<block v-if="goods.content != ''">
<view class="goods-content__detail b-f">
<mp-html :content="goods.content" />
</view>
</block>
<empty v-else tips="亲，暂无商品描述" />
</view>
<!-- 底部选项卡 -->
<view class="footer-fixed">
<view class="footer-container">
<!-- 导航图标 -->
<view class="foo-item-fast">
<!-- 首页 -->
<view class="fast-item fast-item--home" @click="onTargetHome">
<view class="fast-icon">
<text class="iconfont icon-shouye"></text>
</view>
<view class="fast-text">
<text>首页</text>
</view>
</view>
<!-- 客服 -->
<customer-btn v-if="isShowCustomerBtn">
<view class="fast-item">
<view class="fast-icon">
<text class="iconfont icon-kefu1"></text>
</view>
<view class="fast-text">
<text>客服</text>
</view>
</view>
</customer-btn>
<!-- 购物车 (客服按钮不显示时) -->
<view v-if="!isShowCustomerBtn" class="fast-item fast-item--cart" @click="onTargetCart">
<view v-if="cartTotal > 0" class="fast-badge fast-badge--fixed">{{ cartTotal > 99 ? '99+' : cartTotal }}
</view>
<view class="fast-icon">
<text class="iconfont icon-gouwuche"></text>
</view>
<view class="fast-text">
<text>购物车</text>
</view>
</view>
</view>
<!-- 操作按钮 -->
<view class="foo-item-btn">
<view class="btn-wrapper">
<block v-if="goods.active_status == ActiveStatusEnum.STATE_BEGIN.value">
<view v-if="goods.is_alone_buy" class="btn-item btn-item-deputy" @click="onShowSkuPopup(2)">
<view class="price">￥{{ goods.original_price }}</view>
<view>单独购买</view>
</view>
<view class="btn-item btn-item-main" @click="onShowSkuPopup(1)">
<view class="price">￥{{ goods.groupon_price }}</view>
<view>发起拼团</view>
</view>
</block>
<view v-else class="btn-item btn-item-gray">
<text>{{ goods.active_status == ActiveStatusEnum.STATE_SOON.value ? '活动未开始' : '活动已结束' }}</text>
</view>
</view>
</view>
</view>
</view>
<!-- 分享菜单 -->
<share-sheet v-model="showShareSheet" :shareTitle="goods.goods_name" :shareImageUrl="goods.goods_image" :posterApiCall="posterApiCall" :posterApiParam="{ grouponGoodsId }" />
<!-- 拼团规则弹窗 -->
<u-modal v-if="!isLoading" v-model="showRules" title="拼团规则">
<scroll-view style="height: 610rpx; touch-action: none;" :scroll-y="true">
<view class="pops-content">
<text>{{ setting.ruleDetail }}</text>
</view>
</scroll-view>
</u-modal>
</view>
</template>
<script>
import { getSceneData } from '@/core/app'
import ShareSheet from '@/components/share-sheet'
import CustomerBtn from '@/components/customer-btn'
import SkuPopup from './components/SkuPopup'
import TaskList from './components/TaskList'
import SlideImage from '../../goods/components/SlideImage'
import Comment from '../../goods/components/Comment'
import CountDown from '@/components/countdown'
import * as GrouponGoodsApi from '@/api/groupon/goods'
import * as CartApi from '@/api/cart'
import SettingModel from '@/common/model/Setting'
import { ActiveTypeEnum, ActiveStatusEnum } from '@/common/enum/groupon'
export default {
components: {
ShareSheet,
CustomerBtn,
SlideImage,
TaskList,
SkuPopup,
Comment,
CountDown
},
data() {
return {
// 正在加载
isLoading: true,
// 枚举类
ActiveTypeEnum,
ActiveStatusEnum,
// 显示/隐藏SKU弹窗
showSkuPopup: false,
// 按钮模式 1:都显示 2:只显示购物车 3:只显示立即购买
skuMode: 3,
// 购买模式 1:拼团购买 2:单独购买
buyMode: 1,
// 显示/隐藏分享菜单
showShareSheet: false,
// 获取商品海报图api方法
posterApiCall: GrouponGoodsApi.poster,
// 显示拼团规则
showRules: false,
// 拼团规则内容
setting: {},
// 当前拼团商品ID
grouponGoodsId: null,
// 拼团商品详情
goods: {},
// 购物车总数量
cartTotal: 0,
// 是否显示在线客服按钮
isShowCustomerBtn: false
}
},
/**
* 生命周期函数--监听页面加载
*/
async onLoad(options) {
// 记录query参数
this.onRecordQuery(options)
// 加载页面数据
this.onRefreshPage()
// 是否显示在线客服按钮
this.isShowCustomerBtn = await SettingModel.isShowCustomerBtn()
},
methods: {
// 记录query参数
onRecordQuery(query) {
const scene = getSceneData(query)
this.grouponGoodsId = query.grouponGoodsId ? parseInt(query.grouponGoodsId) : parseInt(scene.gid)
},
// 刷新页面数据
onRefreshPage() {
const app = this
app.isLoading = true
Promise.all([app.getActiveDetail(), app.getCartTotal()])
.finally(() => app.isLoading = false)
},
// 获取拼团活动详情
getActiveDetail() {
const app = this
return new Promise((resolve, reject) => {
GrouponGoodsApi.detail(app.grouponGoodsId)
.then(result => {
app.goods = result.data.detail
app.setting = result.data.setting
resolve(result)
})
.catch(reject)
})
},
// 获取购物车总数量
getCartTotal() {
const app = this
return new Promise((resolve, reject) => {
CartApi.total()
.then(result => {
app.cartTotal = result.data.cartTotal
resolve(result)
})
.catch(reject)
})
},
// 显示拼团规则
handleShowRules() {
this.showRules = true
},
// 显示/隐藏SKU弹窗
onShowSkuPopup(buyMode = 1) {
this.buyMode = buyMode
this.showSkuPopup = !this.showSkuPopup
},
// 显示隐藏分享菜单
onShowShareSheet() {
this.showShareSheet = !this.showShareSheet
},
// 跳转到首页
onTargetHome(e) {
this.$navTo('pages/index/index')
},
// 跳转到购物车页
onTargetCart() {
this.$navTo('pages/cart/index')
},
},
/**
* 分享当前页面
*/
onShareAppMessage() {
// 构建页面参数
const app = this
const params = app.$getShareUrlParams({
grouponGoodsId: app.grouponGoodsId
})
return {
title: app.goods.goods_name,
path: `/pages/groupon/goods/index?${params}`
}
},
/**
* 分享到朋友圈
* 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
* https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
*/
onShareTimeline() {
// 构建页面参数
const app = this
const params = app.$getShareUrlParams({
grouponGoodsId: app.grouponGoodsId
})
return {
title: app.goods.goods_name,
path: `/pages/groupon/goods/index?${params}`
}
},
}
</script>
<style>
page {
background: #fafafa;
}
</style>
<style lang="scss" scoped>
@import "./style.scss";
</style>

325
pages/groupon/goods/style.scss Executable file
View File

@@ -0,0 +1,325 @@
.container {
// 设置ios刘海屏底部横线安全区域
// 110 - 18 + 4
padding-bottom: calc(constant(safe-area-inset-bottom) + 106rpx + 6rpx);
padding-bottom: calc(env(safe-area-inset-bottom) + 106rpx + 6rpx);
}
// 商品信息
.goods-info {
background: #fff;
padding: 25rpx 30rpx;
}
.info-item__top {
min-height: 40rpx;
margin-bottom: 20rpx;
}
.info-item__top .active-tag {
color: #fff;
background: linear-gradient(to right, #ffa600, #f5b914);
padding: 4rpx 16rpx;
border-radius: 15rpx;
font-size: 26rpx;
text-align: center;
margin-right: 15rpx;
}
.floor-price__samll {
font-size: 26rpx;
line-height: 1;
color: $main-bg;
margin-bottom: -10rpx;
}
/* 商品价 */
.floor-price {
color: $main-bg;
margin-right: 15rpx;
font-size: 42rpx;
line-height: 1;
}
.original-price {
font-size: 26rpx;
line-height: 1;
text-decoration: line-through;
color: #959595;
margin-bottom: -6rpx;
}
.goods-sales {
font-size: 24rpx;
color: #959595;
}
.info-item__name .goods-name {
font-size: 30rpx;
}
/* 商品分享 */
.goods-share__line {
border-left: 1rpx solid #f4f4f4;
height: 60rpx;
margin: 0 30rpx;
}
.goods-share .share-btn {
line-height: normal;
padding: 0;
background: none;
border-radius: 0;
box-shadow: none;
font-size: 8pt;
border: none;
color: #191919;
}
.goods-share .share-btn::after {
border: none;
}
.goods-share .share__icon {
font-size: 40rpx;
margin-bottom: 5rpx;
}
/* 商品卖点 */
.info-item_selling-point {
margin-top: 8rpx;
font-size: 24rpx;
color: #808080;
}
// 选择商品规格
.goods-choice {
padding: 26rpx 30rpx;
font-size: 28rpx;
.spec-list {
display: flex;
align-items: center;
.spec-name {
margin-right: 10rpx;
}
}
}
/* 商品详情 */
.goods-content .item-title {
padding: 26rpx 30rpx;
font-size: 28rpx;
}
/* 底部操作栏 */
.footer-fixed {
position: fixed;
bottom: var(--window-bottom);
left: 0;
right: 0;
display: flex;
z-index: 11;
box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
background: #fff;
// 设置ios刘海屏底部横线安全区域
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.footer-container {
width: 100%;
display: flex;
height: 106rpx;
}
// 快捷菜单
.foo-item-fast {
box-sizing: border-box;
min-width: 214rpx;
line-height: 1;
display: flex;
align-items: center;
justify-content: space-evenly;
margin-right: 12rpx;
.fast-item {
position: relative;
padding: 4rpx 0;
line-height: 1;
text-align: center;
width: 84rpx;
&--cart {
margin-left: 6rpx;
.fast-icon { margin-left: -12rpx; }
}
// 角标
.fast-badge {
display: inline-block;
box-sizing: border-box;
min-width: 16px;
padding: 0 3px;
color: #fff;
font-weight: 500;
font-size: 12px;
font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
line-height: 1.2;
text-align: center;
background-color: #ee0a24;
border: 1px solid #fff;
border-radius: 999px;
}
.fast-badge--fixed {
position: absolute;
top: 0;
right: 0;
transform-origin: 100%
}
.fast-icon {
font-size: 44rpx;
margin-bottom: 8rpx;
}
.fast-text {
font-size: 22rpx;
}
}
}
// 操作按钮
.foo-item-btn {
flex: 1;
.btn-wrapper {
height: 100%;
display: flex;
align-items: center;
}
.btn-item {
flex: 1;
height: 100%;
font-size: 28rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 0;
color: #fff;
// 发起拼团
&.btn-item-main {
background: linear-gradient(to right, $main-bg, $main-bg2);
color: $main-text;
}
// 单独购买
&.btn-item-deputy {
background: linear-gradient(to right, $vice-bg, $vice-bg2);
color: $vice-text;
}
// 活动结束
&.btn-item-gray {
background-color: #ccc;
}
}
.price {
font-size: 28rpx;
margin-bottom: 4rpx;
}
}
// 活动状态
.info-item_status {
margin-top: 20rpx;
padding: 15rpx 20rpx;
font-size: 24rpx;
border-radius: 6rpx;
}
.info-item_status .countdown-icon {
font-size: 28rpx;
margin-right: 15rpx;
}
// 活动倒计时
.info-item_countdown {
background: #f0f9ff;
color: #8f8f8f;
}
.info-item_countdown .countdown-icon {
color: #1397d8;
}
// 活动已结束
.info-item_end {
background: #ccc;
color: #fff;
}
// 拼团玩法
.rule-nav {
padding: 24rpx;
font-size: 28rpx;
.rule-simple {
margin-top: 35rpx;
color: #737373;
}
.i-number {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
margin-bottom: 15rpx;
border: 1rpx dashed #c0c0c0;
}
}
// 拼团玩法
.groupon-rules {
padding: 20rpx 0;
font-size: 29rpx;
.item-title {
padding: 0 30rpx;
}
.rule-simple {
margin-top: 35rpx;
color: #737373;
}
.i-number {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
margin-bottom: 15rpx;
border: 1rpx dashed #c0c0c0;
}
}
// 拼团规则 (弹窗)
.pops-content {
padding: 30rpx 48rpx;
font-size: 28rpx;
line-height: 44rpx;
text-align: left;
color: #606266;
min-height: 320rpx;
max-height: 640rpx;
box-sizing: border-box;
}