RIceWqy
3 years ago
commit
d9e2784c1b
@ -0,0 +1,4 @@
|
|||||||
|
/node_modules/*
|
||||||
|
/unpackage/*
|
||||||
|
!/unpackage/res/*
|
||||||
|
/.idea/*
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
init
|
||||||
|
} from "@/shopro";
|
||||||
|
export default {
|
||||||
|
onLaunch(options) {
|
||||||
|
init(options);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import 'static/style/index.scss';
|
||||||
|
</style>
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"prompt" : "none"
|
||||||
|
}
|
||||||
@ -0,0 +1,77 @@
|
|||||||
|
<template>
|
||||||
|
<view class="shopro-empty-wrap u-flex-col u-row-center u-col-center" :style="{ 'margin-top': marginTop }">
|
||||||
|
<image class="empty-img" :src="image" mode="aspectFill"></image>
|
||||||
|
<view class="empty-text u-tips-color u-font-26">{{ tipText }}</view>
|
||||||
|
<view class="btn-box u-m-t-100" v-if="btnText">
|
||||||
|
<button class="u-reset-button empty-btn" :style="customStyle" hover-class="none" @tap="onBtn">{{ btnText }}</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* shoproEmpty- 数据为空页
|
||||||
|
* @property {String} image - 空白图。
|
||||||
|
* @property {String} tipText - 提示语。
|
||||||
|
* @property {String} btnText - 按钮文字。
|
||||||
|
* @property {String} marginTop - 距离父级距离。
|
||||||
|
* @property {Object} customStyle - 自定义按钮样式。
|
||||||
|
* @event {Fuction} click - 点击按钮
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'shoproEmpty',
|
||||||
|
props: {
|
||||||
|
image: {
|
||||||
|
type: [String,null],
|
||||||
|
default: '/static/images/empty_network.png'
|
||||||
|
},
|
||||||
|
tipText: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
btnText: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
marginTop: {
|
||||||
|
type: String,
|
||||||
|
default: '300rpx'
|
||||||
|
},
|
||||||
|
customStyle: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {
|
||||||
|
width: '200rpx',
|
||||||
|
height: '70rpx',
|
||||||
|
background: 'linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1))',
|
||||||
|
borderRradius: '35rpx',
|
||||||
|
fontSize: '28rpx',
|
||||||
|
color: '#fff',
|
||||||
|
border: 0
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onBtn() {
|
||||||
|
this.$emit('click');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.empty-img {
|
||||||
|
width: 540rpx;
|
||||||
|
height: 290rpx;
|
||||||
|
}
|
||||||
|
.empty-btn {
|
||||||
|
width: 320rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
line-height: 70rpx;
|
||||||
|
background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
|
||||||
|
border-radius: 35rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: rgba(#fff, 0.9);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,348 @@
|
|||||||
|
<template>
|
||||||
|
<!-- m -->
|
||||||
|
<view class="goods-box" @tap="click">
|
||||||
|
<view class="img-box">
|
||||||
|
<image class="goods-img" lazy-load fade-show :src="image" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="goods-bottom u-p-14"
|
||||||
|
:style="type ? 'background-image: url(' + $IMG_URL + typeMap[type].goodsBg + ')' : ''">
|
||||||
|
<view class="title u-ellipsis-2 u-m-b-10">
|
||||||
|
<view class=" sm cu-tag radius title-tag u-m-r-10"
|
||||||
|
:style="{ backgroundColor: typeMap[type].tagBg, color: '#fff' }" v-if="type">
|
||||||
|
{{ typeMap[type].text }}
|
||||||
|
</view>
|
||||||
|
{{ title }}
|
||||||
|
</view>
|
||||||
|
<view class="sub-title u-ellipsis-1 u-m-b-10" v-show="subtitle">{{ subtitle }}</view>
|
||||||
|
<view class="u-m-b-20">
|
||||||
|
<view class="cu-tag line-red sm radius" v-for="(item, index) in tagTextList" :key="index">{{ item }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<slot name="cardBottom">
|
||||||
|
<view class="u-flex u-col-center u-row-between">
|
||||||
|
<view class="price-box">
|
||||||
|
<view class="price u-m-b-10">{{ price }}</view>
|
||||||
|
<view class="origin-price">￥{{ originPrice }}</view>
|
||||||
|
</view>
|
||||||
|
<!-- 加入购物车 -->
|
||||||
|
<view class="cart-box">
|
||||||
|
<!-- 单规格 -->
|
||||||
|
<view class="" v-if="!detail.is_sku">
|
||||||
|
<button class="u-reset-button cart-btn u-flex u-col-center u-row-center"
|
||||||
|
v-if="!isCart(detail.id)" @tap.stop="addCart(detail.sku_price[0])">
|
||||||
|
<view class="u-iconfont uicon-shopping-cart-fill" style="color: #fff;"></view>
|
||||||
|
</button>
|
||||||
|
<view class="num-step" @tap.stop v-else>
|
||||||
|
<u-number-box :value="checkCart[detail.id].num" :min="0" :step="1" :long-press="false"
|
||||||
|
:max="detail.sku_price[0].stock > 999 ? 999 : detail.sku_price[0].stock"
|
||||||
|
@min="onMin" @plus="plus($event, detail.sku_price[0])"
|
||||||
|
@change="onChangeNum($event, detail.sku_price[0])"></u-number-box>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 多规格 -->
|
||||||
|
<button class="u-reset-button item-btn cart-btn u-flex u-col-center u-row-center"
|
||||||
|
@tap.stop="selSku(detail)" v-else>
|
||||||
|
<view class="u-iconfont uicon-shopping-cart-fill" style="color: #fff;"></view>
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
<!-- 规格弹窗 -->
|
||||||
|
<shopro-sku v-if="showSku && goodsInfo.id" v-model="showSku" :goodsInfo="goodsInfo" buyType="cart"></shopro-sku>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
*shoproGoodsCard - 商品列表卡片
|
||||||
|
* @property {Object} detail - 商品详情
|
||||||
|
* @property {String} type - 商品类型
|
||||||
|
* @property {String} image - 商品图片
|
||||||
|
* @property {String} title - 商品标题
|
||||||
|
* @property {String} subtitle - 商品副标题
|
||||||
|
* @property {String | Number} price - 商品价格
|
||||||
|
* @property {String | Number} originPrice - 商品原价
|
||||||
|
* @property {String | Number} sales - 商品销量
|
||||||
|
* @property {Array} tagTextList - 活动标签
|
||||||
|
* @event {Function} click 商品被点击
|
||||||
|
*/
|
||||||
|
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showSku: false,
|
||||||
|
goodsInfo: {}, //商品详情
|
||||||
|
typeMap: {
|
||||||
|
seckill: {
|
||||||
|
text: '秒杀',
|
||||||
|
tagBg: '#FF5854',
|
||||||
|
goodsBg: '/imgs/tag/seckill_y_bg.png'
|
||||||
|
},
|
||||||
|
groupon: {
|
||||||
|
text: '拼团',
|
||||||
|
tagBg: '#FE832A',
|
||||||
|
goodsBg: '/imgs/tag/groupon_y_bg.png'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters(['cartList', 'checkCart'])
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
detail: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: [String, null],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
image: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
subtitle: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
price: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
originPrice: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
sales: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
tagTextList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions(['getCartList', 'changeCartList', 'addCartGoods']),
|
||||||
|
//点击商品
|
||||||
|
click() {
|
||||||
|
this.$emit('click');
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
// 检测是否为购物车商品
|
||||||
|
isCart(id) {
|
||||||
|
return Object.keys(this.checkCart).includes(id + '');
|
||||||
|
},
|
||||||
|
|
||||||
|
// 检测商品在购物车中的下标
|
||||||
|
checkGoodsIndex(id) {
|
||||||
|
let cIndex = 0;
|
||||||
|
this.cartList.forEach((item, index) => {
|
||||||
|
if (id == item.goods_id) {
|
||||||
|
cIndex = index;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return cIndex;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 更改商品数
|
||||||
|
async onChangeNum(e, sku) {
|
||||||
|
let gIndex = this.checkGoodsIndex(sku.goods_id);
|
||||||
|
if (e.value != this.checkCart[sku.goods_id].num) {
|
||||||
|
uni.showLoading({
|
||||||
|
mask: true
|
||||||
|
});
|
||||||
|
this.$set(this.cartList[gIndex], 'goods_num', +e.value);
|
||||||
|
await this.changeCartList({
|
||||||
|
ids: [this.checkCart[sku.goods_id].cartOrderId],
|
||||||
|
goodsNum: +e.value,
|
||||||
|
art: 'change'
|
||||||
|
});
|
||||||
|
|
||||||
|
await uni.hideLoading();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 到达最小值
|
||||||
|
onMin() {
|
||||||
|
const that = this;
|
||||||
|
let cartGoodId = 0;
|
||||||
|
cartGoodId = this.cartList.filter(item => item.goods_id === that.detail.id)[0].id;
|
||||||
|
uni.showModal({
|
||||||
|
title: '删除提示',
|
||||||
|
confirmColor: '#f0c785',
|
||||||
|
content: `是否确认从购物车中删除此商品?`,
|
||||||
|
success: res => {
|
||||||
|
res.confirm && this.changeCartList({ ids: [cartGoodId], art: 'delete' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 增加
|
||||||
|
plus(e, sku) {
|
||||||
|
if (e.value >= sku.stock) {
|
||||||
|
this.$u.toast('库存不足');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this.detail.activity_type === 'seckill' || this.detail.activity_type === 'groupon') {
|
||||||
|
let rules = this.detail.activity.rules;
|
||||||
|
if (rules.limit_buy != 0 && e.value >= rules.limit_buy) {
|
||||||
|
this.$u.toast('本次活动最多购买' + rules.limit_buy + '件');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 添加购物车,多规格
|
||||||
|
async selSku(info) {
|
||||||
|
if (this.detail.activity_type) {
|
||||||
|
this.$Router.push({ path: '/pages/goods/detail', query: { id: this.detail.id } });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.goodsInfo = {};
|
||||||
|
this.getGoodsDetail(info.id);
|
||||||
|
this.showSku = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 商品详情
|
||||||
|
getGoodsDetail(id) {
|
||||||
|
let that = this;
|
||||||
|
that.$http('goods.detail', {
|
||||||
|
id: id
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code === 1) {
|
||||||
|
that.goodsInfo = res.data;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 加入购物车
|
||||||
|
addCart(sku) {
|
||||||
|
if (sku.stock <= 0) {
|
||||||
|
this.$u.toast('库存不足');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this.detail.activity_type) {
|
||||||
|
this.$Router.push({ path: '/pages/goods/detail', query: { id: this.detail.id } });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let confirmGoodsList = {
|
||||||
|
list: [{
|
||||||
|
goods_id: sku.goods_id,
|
||||||
|
goods_num: 1,
|
||||||
|
sku_price_id: sku.id,
|
||||||
|
goods_price: sku.price
|
||||||
|
}],
|
||||||
|
from: 'goods'
|
||||||
|
};
|
||||||
|
this.addCartGoods(confirmGoodsList).then(res => {
|
||||||
|
if (res.code === 1) {
|
||||||
|
this.$u.toast(res.msg);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.goods-box {
|
||||||
|
width: 345rpx;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.goods-bottom {
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-position: bottom center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-box {
|
||||||
|
width: 345rpx;
|
||||||
|
height: 345rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
|
||||||
|
.goods-img {
|
||||||
|
width: 345rpx;
|
||||||
|
height: 345rpx;
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 330rpx;
|
||||||
|
vertical-align: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 40rpx;
|
||||||
|
color: #333333;
|
||||||
|
padding-top: 6rpx;
|
||||||
|
|
||||||
|
.title-tag {
|
||||||
|
position: relative;
|
||||||
|
top: -6rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-title {
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
width: 330rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-box {
|
||||||
|
.price {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #ff3000;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '￥';
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.origin-price {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
text-decoration: line-through;
|
||||||
|
color: #c4c4c4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sales-box {
|
||||||
|
font-size: 18rpx;
|
||||||
|
|
||||||
|
font-weight: 400;
|
||||||
|
color: #c4c4c4;
|
||||||
|
line-height: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 购物车
|
||||||
|
.cart-box {
|
||||||
|
.cart-btn {
|
||||||
|
width: 54rpx;
|
||||||
|
height: 54rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 0;
|
||||||
|
background: linear-gradient(90deg, #e9b461, #eecc89);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,130 @@
|
|||||||
|
<template>
|
||||||
|
<view class="goods-box u-flex u-col-top" @tap="click">
|
||||||
|
<view class="goods__tag" v-show="tag"><image class="tag-img" :src="tag" mode="widthFix"></image></view>
|
||||||
|
<image class="goods_img" lazy-load fade-show :src="image" mode="aspectFill"></u-image>
|
||||||
|
<view class="u-m-l-20">
|
||||||
|
<view class="goods-title u-ellipsis-2 u-m-b-10">{{ title }}</view>
|
||||||
|
<view v-if="subtitle" class="describe-text u-m-b-10 u-ellipsis-1">{{ subtitle }}</view>
|
||||||
|
<slot name="describe"></slot>
|
||||||
|
<slot name="cardBottom">
|
||||||
|
<view class="u-flex u-col-bottom font-OPPOSANS">
|
||||||
|
<view class="price u-m-r-10">{{ price }}</view>
|
||||||
|
<view class="origin-price">{{ originPrice }}</view>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* 商品小卡片
|
||||||
|
* @property {String} title - 标题
|
||||||
|
* @property {String} subtitle - 副标题
|
||||||
|
* @property {String} image - 图片地址
|
||||||
|
* @property {String} describe - 描述信息
|
||||||
|
* @property {String | Number} price - 价格
|
||||||
|
* @property {String | Number} originPrice - 原价
|
||||||
|
* @property {String} tag - 商品标签
|
||||||
|
* @property {Number} number - 商品数量
|
||||||
|
* @event {Function} click - 点击卡片
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
image: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
subtitle: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
describe: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
price: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
originPrice: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
tag: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
number: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
created() {},
|
||||||
|
methods: {
|
||||||
|
click() {
|
||||||
|
this.$emit('click');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.goods-box {
|
||||||
|
position: relative;
|
||||||
|
.goods__tag {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 5;
|
||||||
|
.tag-img {
|
||||||
|
width: 60rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.goods_img{
|
||||||
|
width: 180rpx;
|
||||||
|
height: 180rpx;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
}
|
||||||
|
.goods-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(51, 51, 51, 1);
|
||||||
|
width: 450rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.describe-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
width: 450rpx;
|
||||||
|
color: #a8700d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price {
|
||||||
|
color: $u-type-error;
|
||||||
|
font-weight: 600;
|
||||||
|
&::before {
|
||||||
|
content: '￥';
|
||||||
|
font-size: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.origin-price {
|
||||||
|
color: $u-type-info-disabled;
|
||||||
|
font-size: 24rpx;
|
||||||
|
text-decoration: line-through;
|
||||||
|
&::before {
|
||||||
|
content: '￥';
|
||||||
|
font-size: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,71 @@
|
|||||||
|
<template>
|
||||||
|
<view class="popup-box" v-show="newPopupList && newPopupList.length">
|
||||||
|
<view class="" v-for="(p, index) in newPopupList" :key="index">
|
||||||
|
<view class="cu-modal" :class="{ show: showModal }" @tap="hideModal(p, index)" v-if="popupCurrent === index && p.image">
|
||||||
|
<view class="cu-dialog" style="width: 610rpx;background: none;">
|
||||||
|
<view class="img-box" @tap.stop="onPopup(p.path)"><image class="modal-img" :src="p.image" mode="aspectFit"></image></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* 广告模态框。连续弹窗和只弹一次。
|
||||||
|
* @property {Object} newPopupList - vuex 初始化传过来的数据
|
||||||
|
*/
|
||||||
|
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
|
||||||
|
let timer = null;
|
||||||
|
export default {
|
||||||
|
name: 'shoproNoticeModal',
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
popupCurrent: 0,
|
||||||
|
showModal: true
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {},
|
||||||
|
computed: {
|
||||||
|
...mapGetters(['popupData', 'isLogin']),
|
||||||
|
newPopupList() {
|
||||||
|
if (this.popupData) {
|
||||||
|
return this.popupData.list;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
clearTimeout(timer);
|
||||||
|
timer = null;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
hideModal(p, index) {
|
||||||
|
clearTimeout(timer);
|
||||||
|
this.showModal = false;
|
||||||
|
if (p.style == 1) {
|
||||||
|
this.$store.commit('delPopup', index);
|
||||||
|
}
|
||||||
|
timer = setTimeout(() => {
|
||||||
|
this.popupCurrent += 1;
|
||||||
|
this.showModal = true;
|
||||||
|
}, 500);
|
||||||
|
},
|
||||||
|
onPopup(path) {
|
||||||
|
this.$tools.routerTo(path);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.img-box {
|
||||||
|
position: relative;
|
||||||
|
width: 610rpx;
|
||||||
|
.modal-img {
|
||||||
|
width: 100%;
|
||||||
|
will-change: transform;
|
||||||
|
height: 830rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,571 @@
|
|||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<!-- 海报弹窗 -->
|
||||||
|
<view class="cu-modal" :class="{ show: showPoster }" @tap="onClosePoster">
|
||||||
|
<view class="cu-dialog" style="width: 640rpx;background: none;">
|
||||||
|
<view class="poster-img-box"><image class="poster-img" :src="posterImage" mode="widthFix"></image></view>
|
||||||
|
<view class="poster-btn-box u-m-t-20 u-flex u-row-between u-col-center" v-show="posterImage">
|
||||||
|
<button class="cancel-btn u-reset-button" @tap="showPoster = false">取消</button>
|
||||||
|
<button class="save-btn u-reset-button" @tap="saveImage">{{ ['wxOfficialAccount', 'H5'].includes(platform) ? '长按图片保存' : '保存图片' }}</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 分享tools -->
|
||||||
|
<view class="cu-modal bottom-modal" :class="{ show: showShare }" @tap="showShare = false">
|
||||||
|
<view class="cu-dialog safe-area-inset-bottom" style="border-radius: 20rpx 20rpx 0 0;background: none;">
|
||||||
|
<view class="share-box">
|
||||||
|
<view class="share-list-box u-flex">
|
||||||
|
<!-- #ifdef MP-WEIXIN -->
|
||||||
|
<button class="share-item share-btn u-flex-col u-col-center" open-type="share">
|
||||||
|
<image class="share-img" :src="$IMG_URL + '/imgs/share/share_wx.png'" mode=""></image>
|
||||||
|
<text class="share-title">微信好友</text>
|
||||||
|
</button>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifndef MP-WEIXIN -->
|
||||||
|
<view v-if="platform !== 'H5'" class="share-item u-flex-col u-col-center" @tap="shareFriend">
|
||||||
|
<image class="share-img" :src="$IMG_URL + '/imgs/share/share_wx.png'" mode=""></image>
|
||||||
|
<text class="share-title">微信好友</text>
|
||||||
|
</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
<view class="share-item u-flex-col u-col-center" @tap="onPoster">
|
||||||
|
<image class="share-img" :src="$IMG_URL + '/imgs/share/share_poster.png'" mode=""></image>
|
||||||
|
<text class="share-title">生成海报</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="share-item u-flex-col u-col-center" @tap="copySharePath">
|
||||||
|
<image class="share-img" :src="$IMG_URL + '/imgs/share/share_link.png'" mode=""></image>
|
||||||
|
<text class="share-title">复制链接</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="share-foot u-flex u-row-center u-col-center" @tap="showShare = false">取消</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 分享指引 -->
|
||||||
|
<view class="cu-modal bottom-modal" :class="{ show: showShareGuide }" @tap="showShareGuide = false">
|
||||||
|
<view class="cu-dialog safe-area-inset-bottom" style="border-radius: 20rpx 20rpx 0 0;background: none;vertical-align: top;">
|
||||||
|
<view class="guide-wrap u-flex u-col-top u-row-center"><image class="guide-img" :src="$IMG_URL + '/imgs/share/share_guide.png'" mode=""></image></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 各海报模块 -->
|
||||||
|
<shopro-canvas v-if="showPoster" ref="shoproCanvas" :canvasParams="canvasParams" @success="onSuccess"></shopro-canvas>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* 分享弹窗
|
||||||
|
* @property {Boolean} value = showModal - v-model控制显隐
|
||||||
|
* @property {String} posterType - 海报类别
|
||||||
|
* @property {Object} posterInfo - 海报数据
|
||||||
|
*/
|
||||||
|
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
|
||||||
|
import Auth from '@/shopro/permission/index.js';
|
||||||
|
export default {
|
||||||
|
name: 'shoproShare',
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showShareGuide: false, //H5的指引。
|
||||||
|
showPoster: false, //海报弹窗
|
||||||
|
platform: this.$platform.get(),
|
||||||
|
posterImage: '',
|
||||||
|
canvasParams: {}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
posterType: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
posterInfo: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {}
|
||||||
|
},
|
||||||
|
value: {}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters(['initShare', 'userInfo', 'isLogin', 'shareInfo']),
|
||||||
|
showShare: {
|
||||||
|
get() {
|
||||||
|
return this.value;
|
||||||
|
},
|
||||||
|
set(val) {
|
||||||
|
if (!this.showPoster) {
|
||||||
|
val ? uni.hideTabBar() : uni.showTabBar();
|
||||||
|
}
|
||||||
|
this.$emit('input', val);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
uni.$on('ON_WX_SHARE', () => {
|
||||||
|
this.showShare = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 关闭弹窗
|
||||||
|
onClosePoster() {
|
||||||
|
this.showPoster = false;
|
||||||
|
uni.showTabBar();
|
||||||
|
},
|
||||||
|
// 绘制成功
|
||||||
|
onSuccess(e) {
|
||||||
|
this.posterImage = e;
|
||||||
|
},
|
||||||
|
// 开始绘制
|
||||||
|
onPoster() {
|
||||||
|
this.posterImage = '';
|
||||||
|
uni.hideTabBar();
|
||||||
|
if (this.$store.getters.isLogin) {
|
||||||
|
this.canvasParams = this.getPosterFormatter();
|
||||||
|
this.showPoster = true;
|
||||||
|
} else {
|
||||||
|
this.$store.dispatch('showAuthModal', 'accountLogin');
|
||||||
|
}
|
||||||
|
this.showShare = false;
|
||||||
|
},
|
||||||
|
// 分享好友
|
||||||
|
shareFriend() {
|
||||||
|
let that = this;
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
uni.share({
|
||||||
|
provider: 'weixin',
|
||||||
|
scene: 'WXSceneSession',
|
||||||
|
type: 0,
|
||||||
|
href: that.shareInfo.path,
|
||||||
|
title: that.shareInfo.title,
|
||||||
|
summary: that.shareInfo.title,
|
||||||
|
image: that.shareInfo.image,
|
||||||
|
success: res => {
|
||||||
|
console.log('success:' + JSON.stringify(res));
|
||||||
|
this.showShare = false;
|
||||||
|
},
|
||||||
|
fail: err => {
|
||||||
|
console.log('fail:' + JSON.stringify(err));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// #endif
|
||||||
|
// #ifdef H5
|
||||||
|
this.showShare = false;
|
||||||
|
this.showShareGuide = true;
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
|
||||||
|
// 保存图片
|
||||||
|
async saveImage() {
|
||||||
|
let that = this;
|
||||||
|
if (['wxOfficialAccount', 'H5'].includes(this.platform)) {
|
||||||
|
this.$u.toast('长按图片保存');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
let authState = await new Auth('writePhotosAlbum').check();
|
||||||
|
if (authState) {
|
||||||
|
uni.saveImageToPhotosAlbum({
|
||||||
|
filePath: that.posterImage,
|
||||||
|
success: res => {
|
||||||
|
this.$u.toast('保存成功');
|
||||||
|
this.showPoster = false;
|
||||||
|
},
|
||||||
|
fail: err => {
|
||||||
|
console.log(`图片保存失败:`, err);
|
||||||
|
this.$u.toast('保存失败');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 复制链接
|
||||||
|
copySharePath() {
|
||||||
|
let that = this;
|
||||||
|
uni.setClipboardData({
|
||||||
|
data: that.shareInfo.copyLink,
|
||||||
|
success: data => {
|
||||||
|
that.$u.toast('已复制到剪切板');
|
||||||
|
that.showShare = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 获取海报格式,规则说明在@/shopro/poster/tools.js中的initDrawArray
|
||||||
|
getPosterFormatter() {
|
||||||
|
const that = this;
|
||||||
|
let data = {};
|
||||||
|
switch (this.posterType) {
|
||||||
|
case 'user':
|
||||||
|
data = {
|
||||||
|
backgroundImage: that.initShare.user_poster_bg,
|
||||||
|
drawArray: [
|
||||||
|
{
|
||||||
|
name: '用户昵称',
|
||||||
|
type: 'text',
|
||||||
|
text: that.userInfo.nickname,
|
||||||
|
isBgCenter: true,
|
||||||
|
size: 28,
|
||||||
|
dy: 250,
|
||||||
|
color: '#333',
|
||||||
|
textAlign: 'middle',
|
||||||
|
textBaseLine: 'middle'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'avatar',
|
||||||
|
type: 'image',
|
||||||
|
url: that.userInfo.avatar,
|
||||||
|
alpha: 1,
|
||||||
|
isBgCenter: true,
|
||||||
|
dy: 95,
|
||||||
|
dWidth: 120,
|
||||||
|
dHeight: 120,
|
||||||
|
circleSet: {}
|
||||||
|
},
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
{
|
||||||
|
name: 'wxCode',
|
||||||
|
type: 'image',
|
||||||
|
url: `${that.$API_URL}wechat/wxacode?scene=${that.shareInfo.query}`,
|
||||||
|
alpha: 1,
|
||||||
|
dy: 560,
|
||||||
|
isBgCenter: true,
|
||||||
|
dWidth: 180,
|
||||||
|
dHeight: 180
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
// #ifndef MP-WEIXIN
|
||||||
|
{
|
||||||
|
name: '普通二维码',
|
||||||
|
type: 'qrcode',
|
||||||
|
text: that.shareInfo.path,
|
||||||
|
size: 180,
|
||||||
|
dy: 560,
|
||||||
|
isBgCenter: true
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
]
|
||||||
|
};
|
||||||
|
break;
|
||||||
|
case 'goods':
|
||||||
|
data = {
|
||||||
|
backgroundImage: that.initShare.goods_poster_bg,
|
||||||
|
drawArray: [
|
||||||
|
{
|
||||||
|
name: 'avatar',
|
||||||
|
type: 'image',
|
||||||
|
url: that.userInfo.avatar,
|
||||||
|
alpha: 1,
|
||||||
|
dy: 40,
|
||||||
|
dx: 38,
|
||||||
|
dWidth: 80,
|
||||||
|
dHeight: 80,
|
||||||
|
circleSet: {}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
text: that.userInfo.nickname,
|
||||||
|
size: 28,
|
||||||
|
color: '#333',
|
||||||
|
alpha: 1,
|
||||||
|
textAlign: 'middle',
|
||||||
|
textBaseline: 'bottom',
|
||||||
|
dx: 140,
|
||||||
|
dy: 40
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
text: '推荐一个好物给你,请查收！',
|
||||||
|
size: 26,
|
||||||
|
color: '#333',
|
||||||
|
alpha: 1,
|
||||||
|
textAlign: 'middle',
|
||||||
|
textBaseline: 'middle',
|
||||||
|
dx: 140,
|
||||||
|
dy: 80
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'goodsImage',
|
||||||
|
type: 'image',
|
||||||
|
url: that.posterInfo.image,
|
||||||
|
alpha: 1,
|
||||||
|
isBgCenter: true,
|
||||||
|
dy: 140,
|
||||||
|
dWidth: 620,
|
||||||
|
dHeight: 620,
|
||||||
|
roundRectSet: {
|
||||||
|
r: 20
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text', //标题
|
||||||
|
text: that.posterInfo.title,
|
||||||
|
size: 28,
|
||||||
|
color: '#333',
|
||||||
|
alpha: 1,
|
||||||
|
textAlign: 'left',
|
||||||
|
textBaseline: 'middle',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
lineFeed: {
|
||||||
|
maxWidth: 620,
|
||||||
|
lineHeight: 40,
|
||||||
|
lineNum: 2
|
||||||
|
},
|
||||||
|
dx: 36,
|
||||||
|
dy: 780
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
text: `￥${that.posterInfo.price}`,
|
||||||
|
size: 38,
|
||||||
|
color: '#E1212B',
|
||||||
|
alpha: 1,
|
||||||
|
textAlign: 'left',
|
||||||
|
textBaseline: 'middle',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
fontFamily: 'OPPOSANS',
|
||||||
|
dx: 30,
|
||||||
|
dy: 860
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
text: `￥${that.posterInfo.original_price}`,
|
||||||
|
size: 28,
|
||||||
|
color: '#999999',
|
||||||
|
alpha: 1,
|
||||||
|
textAlign: 'left',
|
||||||
|
textBaseline: 'top',
|
||||||
|
lineThrough: {
|
||||||
|
style: '#999999'
|
||||||
|
},
|
||||||
|
dx: 400,
|
||||||
|
dy: 860
|
||||||
|
},
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
{
|
||||||
|
name: 'wxCode',
|
||||||
|
type: 'image', //微信小程序码
|
||||||
|
url: `${that.$API_URL}wechat/wxacode?scene=${that.shareInfo.query}`,
|
||||||
|
alpha: 1,
|
||||||
|
dx: 522,
|
||||||
|
dy: 911,
|
||||||
|
dWidth: 110,
|
||||||
|
dHeight: 110
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
// #ifndef MP-WEIXIN
|
||||||
|
{
|
||||||
|
type: 'qrcode',
|
||||||
|
text: that.shareInfo.copyLink,
|
||||||
|
size: 110,
|
||||||
|
dx: 530,
|
||||||
|
dy: 930
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
]
|
||||||
|
};
|
||||||
|
break;
|
||||||
|
case 'groupon':
|
||||||
|
data = {
|
||||||
|
backgroundImage: that.initShare.groupon_poster_bg,
|
||||||
|
drawArray: [
|
||||||
|
{
|
||||||
|
name: 'avatar',
|
||||||
|
type: 'image',
|
||||||
|
url: that.userInfo.avatar,
|
||||||
|
alpha: 1,
|
||||||
|
dy: 40,
|
||||||
|
dx: 38,
|
||||||
|
dWidth: 80,
|
||||||
|
dHeight: 80,
|
||||||
|
circleSet: {}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
text: that.userInfo.nickname,
|
||||||
|
size: 28,
|
||||||
|
color: '#333',
|
||||||
|
alpha: 1,
|
||||||
|
textAlign: 'middle',
|
||||||
|
textBaseline: 'bottom',
|
||||||
|
dx: 140,
|
||||||
|
dy: 40
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
text: '发现一个好物，快来和我一起拼吧！',
|
||||||
|
size: 26,
|
||||||
|
color: '#333',
|
||||||
|
alpha: 1,
|
||||||
|
textAlign: 'middle',
|
||||||
|
textBaseline: 'middle',
|
||||||
|
dx: 140,
|
||||||
|
dy: 80
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'goodsImage',
|
||||||
|
type: 'image',
|
||||||
|
url: that.posterInfo.goods.image,
|
||||||
|
alpha: 1,
|
||||||
|
isBgCenter: true,
|
||||||
|
dy: 140,
|
||||||
|
dWidth: 620,
|
||||||
|
dHeight: 620,
|
||||||
|
roundRectSet: {
|
||||||
|
r: 20
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text', //标题
|
||||||
|
text: that.posterInfo.goods.title,
|
||||||
|
size: 28,
|
||||||
|
color: '#333',
|
||||||
|
alpha: 1,
|
||||||
|
textAlign: 'left',
|
||||||
|
textBaseline: 'middle',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
lineFeed: {
|
||||||
|
maxWidth: 620,
|
||||||
|
lineHeight: 40,
|
||||||
|
lineNum: 2
|
||||||
|
},
|
||||||
|
dx: 36,
|
||||||
|
dy: 780
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
text: `拼团价：￥${that.posterInfo.goods.groupon_price}`,
|
||||||
|
size: 32,
|
||||||
|
color: '#E1212B',
|
||||||
|
alpha: 1,
|
||||||
|
textAlign: 'left',
|
||||||
|
textBaseline: 'middle',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
fontFamily: 'OPPOSANS',
|
||||||
|
dx: 30,
|
||||||
|
dy: 860
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
text: `${that.posterInfo.num}人团`,
|
||||||
|
size: 24,
|
||||||
|
color: '#fff',
|
||||||
|
alpha: 1,
|
||||||
|
textAlign: 'left',
|
||||||
|
textBaseline: 'top',
|
||||||
|
dx: 565,
|
||||||
|
dy: 863
|
||||||
|
},
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
{
|
||||||
|
name: 'wxCode',
|
||||||
|
type: 'image', //微信小程序码
|
||||||
|
url: `${that.$API_URL}wechat/wxacode?scene=${that.shareInfo.query}`,
|
||||||
|
alpha: 1,
|
||||||
|
dx: 530,
|
||||||
|
dy: 930,
|
||||||
|
dWidth: 110,
|
||||||
|
dHeight: 110
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
// #ifndef MP-WEIXIN
|
||||||
|
{
|
||||||
|
type: 'qrcode',
|
||||||
|
text: that.shareInfo.path,
|
||||||
|
size: 110,
|
||||||
|
dx: 530,
|
||||||
|
dy: 930
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
]
|
||||||
|
};
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.log('%cerr:没有此类型海报数据', 'color:green;background:yellow');
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
// 指引
|
||||||
|
.guide-wrap {
|
||||||
|
height: 100%;
|
||||||
|
.guide-img {
|
||||||
|
width: 580rpx;
|
||||||
|
height: 430rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 分享海报
|
||||||
|
.poster-btn-box {
|
||||||
|
.cancel-btn {
|
||||||
|
width: 300rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
line-height: 70rpx;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 35rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
.save-btn {
|
||||||
|
width: 300rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
line-height: 70rpx;
|
||||||
|
background: linear-gradient(90deg, #e9b461, #eecc89);
|
||||||
|
border-radius: 35rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.poster-img-box {
|
||||||
|
.poster-img {
|
||||||
|
width: 660rpx;
|
||||||
|
min-height: 800rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 分享tool
|
||||||
|
.share-box {
|
||||||
|
background: #fff;
|
||||||
|
width: 750rpx;
|
||||||
|
border-radius: 30rpx 30rpx 0 0;
|
||||||
|
padding-top: 30rpx;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.share-foot {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #bfbfbf;
|
||||||
|
height: 80rpx;
|
||||||
|
border-top: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-list-box {
|
||||||
|
.share-btn {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 0;
|
||||||
|
&::after {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.share-item {
|
||||||
|
flex: 1;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
|
||||||
|
.share-img {
|
||||||
|
width: 70rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
background: rgba(246, 246, 254, 1);
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-title {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,142 @@
|
|||||||
|
<template>
|
||||||
|
<view class="shopro-tabbar-wrap" v-if="tabbarList && tabbarList.length && showTabbar">
|
||||||
|
<view class="tabbar-box" :style="{ background: tabbarData.bgcolor || '#fff' }">
|
||||||
|
<view class="tabbar-item" v-for="(tab, index) in tabbarList" :key="tab.name" @tap="switchTabbar(tab, index)">
|
||||||
|
<view class="img-box">
|
||||||
|
<image
|
||||||
|
class="tabbar-icon"
|
||||||
|
v-if="tabbarData.style == 1 || tabbarData.style == 2"
|
||||||
|
:src="currentPath == tab.path ? tab.activeImage : tab.image"
|
||||||
|
mode="aspectFill"
|
||||||
|
></image>
|
||||||
|
<!-- 购物车角标 -->
|
||||||
|
<view v-if="tab.path == '/pages/index/cart' && cartNum" class="badge">{{ cartNum }}</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view
|
||||||
|
class="tabbar-text"
|
||||||
|
v-if="tabbarData.style == 1 || tabbarData.style == 3"
|
||||||
|
:style="{ color: currentPath == tab.path ? tabbarData.activeColor : tabbarData.color }"
|
||||||
|
>
|
||||||
|
{{ tab.name }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* 自定义底部导航
|
||||||
|
* @property {Array} tabbarList - vuex初始化的底部导航数据
|
||||||
|
* @property {String} currentPath -computed解析当前页面路径。
|
||||||
|
*/
|
||||||
|
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
|
||||||
|
import { router } from '@/shopro/router';
|
||||||
|
export default {
|
||||||
|
name: 'shoproTabbar',
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentPath: '' //当前页面路径
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.currentPath = this.$Route.path === '/pages/index/index' ? this.$Route.path : this.$Route.fullPath;
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters(['cartNum', 'tabbarData']),
|
||||||
|
// 底部导航栏列表
|
||||||
|
tabbarList() {
|
||||||
|
if (this.tabbarData) {
|
||||||
|
return this.tabbarData.list;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 后台tabbarList数据中必需含有'/pages/index/index',不然逻辑混乱
|
||||||
|
showTabbar() {
|
||||||
|
if (this.tabbarData && this.tabbarData.list) {
|
||||||
|
let arr = ['/pages/index/index'];
|
||||||
|
let path = '';
|
||||||
|
for (let item of this.tabbarData.list) {
|
||||||
|
arr.push(item.path);
|
||||||
|
}
|
||||||
|
return arr.includes(this.currentPath);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 切换tabbar
|
||||||
|
switchTabbar(tab, index) {
|
||||||
|
this.$tools.routerTo(tab.path, true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.shopro-tabbar-wrap {
|
||||||
|
height: calc(100rpx + env(safe-area-inset-bottom) / 2);
|
||||||
|
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 70;
|
||||||
|
|
||||||
|
.tabbar-box {
|
||||||
|
position: fixed;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100rpx + env(safe-area-inset-bottom) / 2);
|
||||||
|
border-top: 1rpx solid #eeeeee;
|
||||||
|
background-color: #fff;
|
||||||
|
z-index: 998;
|
||||||
|
bottom: 0;
|
||||||
|
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||||
|
|
||||||
|
.tabbar-item {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.img-box {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
position: absolute;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: inline-flex;
|
||||||
|
/* #endif */
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
line-height: 24rpx;
|
||||||
|
padding: 4rpx 10rpx;
|
||||||
|
border-radius: 100rpx;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 24rpx;
|
||||||
|
z-index: 9;
|
||||||
|
background-color: $u-type-error;
|
||||||
|
transform: scale(0.8);
|
||||||
|
transform-origin: center center;
|
||||||
|
top: 0;
|
||||||
|
left: 46rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar-icon {
|
||||||
|
width: 50rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar-text {
|
||||||
|
font-size: 20rpx;
|
||||||
|
margin-top: 4rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
import Vue from "vue";
|
||||||
|
import App from "./App";
|
||||||
|
import {
|
||||||
|
router,
|
||||||
|
RouterMount
|
||||||
|
} from "@/shopro/router";
|
||||||
|
import store from "@/shopro/store";
|
||||||
|
import uView from "uview-ui";
|
||||||
|
import shopro from "@/shopro";
|
||||||
|
|
||||||
|
|
||||||
|
async function bootstrap() {
|
||||||
|
App.mpType = "app";
|
||||||
|
//引入路由
|
||||||
|
Vue.use(router);
|
||||||
|
// 引入全局uView
|
||||||
|
Vue.use(uView);
|
||||||
|
// 加载shopro
|
||||||
|
Vue.use(shopro);
|
||||||
|
|
||||||
|
const app = new Vue({
|
||||||
|
store,
|
||||||
|
...App
|
||||||
|
});
|
||||||
|
// #ifdef H5
|
||||||
|
RouterMount(app, router, "#app");
|
||||||
|
// #endif
|
||||||
|
// #ifndef H5
|
||||||
|
app.$mount();
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
|
||||||
|
bootstrap();
|
||||||
@ -0,0 +1,138 @@
|
|||||||
|
{
|
||||||
|
"name": "shopro-plus",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"lockfileVersion": 2,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {
|
||||||
|
"": {
|
||||||
|
"name": "shopro-plus",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"jweixin-module": "^1.6.0",
|
||||||
|
"uni-read-pages": "^1.0.5",
|
||||||
|
"uni-simple-router": "^2.0.6",
|
||||||
|
"vconsole": "^3.7.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {}
|
||||||
|
},
|
||||||
|
"node_modules/@babel/runtime": {
|
||||||
|
"version": "7.23.6",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.23.6.tgz",
|
||||||
|
"integrity": "sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"regenerator-runtime": "^0.14.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6.9.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/copy-text-to-clipboard": {
|
||||||
|
"version": "3.2.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/copy-text-to-clipboard/-/copy-text-to-clipboard-3.2.0.tgz",
|
||||||
|
"integrity": "sha512-RnJFp1XR/LOBDckxTib5Qjr/PMfkatD0MUCQgdpqS8MdKiNUzBjAQBEN6oUy+jW7LI93BBG3DtMB2KOOKpGs2Q==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/core-js": {
|
||||||
|
"version": "3.34.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.34.0.tgz",
|
||||||
|
"integrity": "sha512-aDdvlDder8QmY91H88GzNi9EtQi2TjvQhpCX6B1v/dAZHU1AuLgHvRh54RiOerpEhEW46Tkf+vgAViB/CWC0ag==",
|
||||||
|
"hasInstallScript": true
|
||||||
|
},
|
||||||
|
"node_modules/jweixin-module": {
|
||||||
|
"version": "1.6.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/jweixin-module/-/jweixin-module-1.6.0.tgz",
|
||||||
|
"integrity": "sha512-dGk9cf+ipipHmtzYmKZs5B2toX+p4hLyllGLF6xuC8t+B05oYxd8fYoaRz0T30U2n3RUv8a4iwvjhA+OcYz52w=="
|
||||||
|
},
|
||||||
|
"node_modules/mutation-observer": {
|
||||||
|
"version": "1.0.3",
|
||||||
|
"resolved": "https://registry.npmmirror.com/mutation-observer/-/mutation-observer-1.0.3.tgz",
|
||||||
|
"integrity": "sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA=="
|
||||||
|
},
|
||||||
|
"node_modules/regenerator-runtime": {
|
||||||
|
"version": "0.14.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
|
||||||
|
"integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
|
||||||
|
},
|
||||||
|
"node_modules/uni-read-pages": {
|
||||||
|
"version": "1.0.5",
|
||||||
|
"resolved": "https://registry.npmmirror.com/uni-read-pages/-/uni-read-pages-1.0.5.tgz",
|
||||||
|
"integrity": "sha512-GkrrZ0LX0vn9R5k6RKEi0Ez3Q3e2vUpjXQ8Z6/K/d28KudI9ajqgt8WEjQFlG5EPm1K6uTArN8LlqmZTEixDUA==",
|
||||||
|
"hasInstallScript": true
|
||||||
|
},
|
||||||
|
"node_modules/uni-simple-router": {
|
||||||
|
"version": "2.0.7",
|
||||||
|
"resolved": "https://registry.npmmirror.com/uni-simple-router/-/uni-simple-router-2.0.7.tgz",
|
||||||
|
"integrity": "sha512-8FKv5dw7Eoonm0gkO8udprrxzin0fNUI0+AvIphFkFRH5ZmP5ZWJ2pvnWzb2NiiqQSECTSU5VSB7HhvOSwD5eA=="
|
||||||
|
},
|
||||||
|
"node_modules/vconsole": {
|
||||||
|
"version": "3.15.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/vconsole/-/vconsole-3.15.1.tgz",
|
||||||
|
"integrity": "sha512-KH8XLdrq9T5YHJO/ixrjivHfmF2PC2CdVoK6RWZB4yftMykYIaXY1mxZYAic70vADM54kpMQF+dYmvl5NRNy1g==",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.17.2",
|
||||||
|
"copy-text-to-clipboard": "^3.0.1",
|
||||||
|
"core-js": "^3.11.0",
|
||||||
|
"mutation-observer": "^1.0.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": {
|
||||||
|
"version": "7.23.6",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.23.6.tgz",
|
||||||
|
"integrity": "sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==",
|
||||||
|
"requires": {
|
||||||
|
"regenerator-runtime": "^0.14.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"copy-text-to-clipboard": {
|
||||||
|
"version": "3.2.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/copy-text-to-clipboard/-/copy-text-to-clipboard-3.2.0.tgz",
|
||||||
|
"integrity": "sha512-RnJFp1XR/LOBDckxTib5Qjr/PMfkatD0MUCQgdpqS8MdKiNUzBjAQBEN6oUy+jW7LI93BBG3DtMB2KOOKpGs2Q=="
|
||||||
|
},
|
||||||
|
"core-js": {
|
||||||
|
"version": "3.34.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.34.0.tgz",
|
||||||
|
"integrity": "sha512-aDdvlDder8QmY91H88GzNi9EtQi2TjvQhpCX6B1v/dAZHU1AuLgHvRh54RiOerpEhEW46Tkf+vgAViB/CWC0ag=="
|
||||||
|
},
|
||||||
|
"jweixin-module": {
|
||||||
|
"version": "1.6.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/jweixin-module/-/jweixin-module-1.6.0.tgz",
|
||||||
|
"integrity": "sha512-dGk9cf+ipipHmtzYmKZs5B2toX+p4hLyllGLF6xuC8t+B05oYxd8fYoaRz0T30U2n3RUv8a4iwvjhA+OcYz52w=="
|
||||||
|
},
|
||||||
|
"mutation-observer": {
|
||||||
|
"version": "1.0.3",
|
||||||
|
"resolved": "https://registry.npmmirror.com/mutation-observer/-/mutation-observer-1.0.3.tgz",
|
||||||
|
"integrity": "sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA=="
|
||||||
|
},
|
||||||
|
"regenerator-runtime": {
|
||||||
|
"version": "0.14.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
|
||||||
|
"integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
|
||||||
|
},
|
||||||
|
"uni-read-pages": {
|
||||||
|
"version": "1.0.5",
|
||||||
|
"resolved": "https://registry.npmmirror.com/uni-read-pages/-/uni-read-pages-1.0.5.tgz",
|
||||||
|
"integrity": "sha512-GkrrZ0LX0vn9R5k6RKEi0Ez3Q3e2vUpjXQ8Z6/K/d28KudI9ajqgt8WEjQFlG5EPm1K6uTArN8LlqmZTEixDUA=="
|
||||||
|
},
|
||||||
|
"uni-simple-router": {
|
||||||
|
"version": "2.0.7",
|
||||||
|
"resolved": "https://registry.npmmirror.com/uni-simple-router/-/uni-simple-router-2.0.7.tgz",
|
||||||
|
"integrity": "sha512-8FKv5dw7Eoonm0gkO8udprrxzin0fNUI0+AvIphFkFRH5ZmP5ZWJ2pvnWzb2NiiqQSECTSU5VSB7HhvOSwD5eA=="
|
||||||
|
},
|
||||||
|
"vconsole": {
|
||||||
|
"version": "3.15.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/vconsole/-/vconsole-3.15.1.tgz",
|
||||||
|
"integrity": "sha512-KH8XLdrq9T5YHJO/ixrjivHfmF2PC2CdVoK6RWZB4yftMykYIaXY1mxZYAic70vADM54kpMQF+dYmvl5NRNy1g==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.17.2",
|
||||||
|
"copy-text-to-clipboard": "^3.0.1",
|
||||||
|
"core-js": "^3.11.0",
|
||||||
|
"mutation-observer": "^1.0.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"name": "shopro-plus",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"main": "main.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": ""
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": ""
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"homepage": "",
|
||||||
|
"dependencies": {
|
||||||
|
"jweixin-module": "^1.6.0",
|
||||||
|
"uni-read-pages": "^1.0.5",
|
||||||
|
"uni-simple-router": "^2.0.6",
|
||||||
|
"vconsole": "^3.7.0"
|
||||||
|
},
|
||||||
|
"description": "",
|
||||||
|
"devDependencies": {}
|
||||||
|
}
|
||||||
@ -0,0 +1,921 @@
|
|||||||
|
{
|
||||||
|
"easycom": {
|
||||||
|
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue",
|
||||||
|
"^shopro-(.*)": "@/components/shopro-$1/shopro-$1.vue"
|
||||||
|
},
|
||||||
|
|
||||||
|
"pages": [{
|
||||||
|
"path": "pages/index/index",
|
||||||
|
"aliasPath": "/", //对于h5端你必须在首页加上aliasPath并设置为/
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "首页",
|
||||||
|
"navigationBarTextStyle": "white",
|
||||||
|
"enablePullDownRefresh": true,
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"mp-alipay": {
|
||||||
|
"transparentTitle": "always",
|
||||||
|
"titlePenetrate": "YES",
|
||||||
|
"allowsBounceVertical": "NO"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": false, //需要登录
|
||||||
|
"async": true, //是否同步
|
||||||
|
"title": "首页", //标题
|
||||||
|
"group": "商城" //分组
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/index/category",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "分类"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": false,
|
||||||
|
"async": true,
|
||||||
|
"title": "分类",
|
||||||
|
"group": "商城"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/index/cart",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "购物车"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": false,
|
||||||
|
"async": true,
|
||||||
|
"title": "购物车",
|
||||||
|
"group": "商城"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/index/user",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "我的",
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTextStyle": "white",
|
||||||
|
"enablePullDownRefresh": true
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": false,
|
||||||
|
"async": true,
|
||||||
|
"title": "我的",
|
||||||
|
"group": "商城"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/index/view",
|
||||||
|
"name": "view",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": true
|
||||||
|
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": false,
|
||||||
|
"async": true,
|
||||||
|
"title": "自定义页面",
|
||||||
|
"group": "商城"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"subPackages": [{
|
||||||
|
"root": "pages/activity",
|
||||||
|
"pages": [{
|
||||||
|
"path": "sign/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "签到中心"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "签到中心",
|
||||||
|
"group": "应用"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "seckill/list",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "限时秒杀",
|
||||||
|
"enablePullDownRefresh": true
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": false,
|
||||||
|
"async": true,
|
||||||
|
"title": "限时秒杀",
|
||||||
|
"group": "秒杀"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "groupon/list",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "今日必拼",
|
||||||
|
"enablePullDownRefresh": true
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": false,
|
||||||
|
"async": true,
|
||||||
|
"title": "今日必拼",
|
||||||
|
"group": "拼团"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "groupon/detail",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "拼团详情",
|
||||||
|
"enablePullDownRefresh": true
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": false,
|
||||||
|
"async": false,
|
||||||
|
"title": "拼团详情",
|
||||||
|
"group": "拼团"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "groupon/my-groupon",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "我的拼团",
|
||||||
|
"enablePullDownRefresh": true
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "我的拼团",
|
||||||
|
"group": "拼团"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "discounts/list",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "优惠活动商品"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": false,
|
||||||
|
"async": false,
|
||||||
|
"title": "优惠活动商品",
|
||||||
|
"group": "活动"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"root": "pages/app",
|
||||||
|
"pages": [
|
||||||
|
// {
|
||||||
|
// "path": "live/list",
|
||||||
|
// "style": {
|
||||||
|
// "navigationBarTitleText": "直播列表"
|
||||||
|
// },
|
||||||
|
// "meta": {
|
||||||
|
// "auth": false,
|
||||||
|
// "async": false,
|
||||||
|
// "title": "直播列表",
|
||||||
|
// "group": "直播"
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
"path": "score/list",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "积分商品"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": false,
|
||||||
|
"async": true,
|
||||||
|
"title": "积分商品",
|
||||||
|
"group": "积分"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "coupon/list",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "优惠券中心",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "优惠券中心",
|
||||||
|
"group": "优惠券"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "coupon/detail",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "优惠券详情",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "优惠券详情",
|
||||||
|
"group": "优惠券"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "merchant/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "门店中心",
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"enablePullDownRefresh": true,
|
||||||
|
"navigationBarTextStyle": "white"
|
||||||
|
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": false,
|
||||||
|
"title": "门店中心",
|
||||||
|
"group": "门店"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "merchant/apply",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "门店入驻",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "门店入驻",
|
||||||
|
"group": "门店"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "merchant/detail",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "订单详情"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": false,
|
||||||
|
"title": "订单详情",
|
||||||
|
"group": "订单"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "merchant/info",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "门店详情"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": false,
|
||||||
|
"title": "门店详情",
|
||||||
|
"group": "门店"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "merchant/list",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "我的门店"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "我的门店",
|
||||||
|
"group": "门店"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "commission/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "分销中心",
|
||||||
|
"enablePullDownRefresh": true,
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTextStyle": "white"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "分销中心",
|
||||||
|
"group": "分销"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "commission/team",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "我的团队",
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTextStyle": "white"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "我的团队",
|
||||||
|
"group": "分销"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "commission/commission-log",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "佣金明细",
|
||||||
|
"enablePullDownRefresh": true
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "佣金明细",
|
||||||
|
"group": "分销"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "commission/order",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "分销订单",
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTextStyle": "white",
|
||||||
|
"enablePullDownRefresh": true
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "分销订单",
|
||||||
|
"group": "分销"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "commission/goods",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "推广商品"
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "推广商品",
|
||||||
|
"group": "分销"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "commission/apply",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "申请分销商",
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTextStyle": "white"
|
||||||
|
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "申请分销商",
|
||||||
|
"group": "分销"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "commission/rankings",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "分销排行",
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTextStyle": "white"
|
||||||
|
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "分销排行",
|
||||||
|
"group": "分销"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "commission/share-log",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "分享记录",
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTextStyle": "white",
|
||||||
|
"enablePullDownRefresh": true
|
||||||
|
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": false,
|
||||||
|
"title": "分享记录",
|
||||||
|
"group": "分销"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"root": "pages/goods",
|
||||||
|
"pages": [{
|
||||||
|
"path": "list",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "商品列表",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": false,
|
||||||
|
"async": true,
|
||||||
|
"title": "商品列表",
|
||||||
|
"group": "商品"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "detail",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "商品详情",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": false,
|
||||||
|
"async": true,
|
||||||
|
"title": "商品详情",
|
||||||
|
"group": "商品"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "comment/add-comment",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "评价"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": false,
|
||||||
|
"async": false,
|
||||||
|
"title": "评价",
|
||||||
|
"group": "商品"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "comment/comment-list",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "评价列表"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": false,
|
||||||
|
"async": false,
|
||||||
|
"title": "评价列表",
|
||||||
|
"group": "商品"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"root": "pages/order",
|
||||||
|
"pages": [{
|
||||||
|
"path": "confirm",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "确认订单"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": false,
|
||||||
|
"title": "确认订单",
|
||||||
|
"group": "订单"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "payment/method",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "收银台"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": false,
|
||||||
|
"title": "收银台",
|
||||||
|
"group": "订单"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "payment/result",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "支付结果"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": false,
|
||||||
|
"async": false,
|
||||||
|
"title": "支付结果",
|
||||||
|
"group": "订单"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "list",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "订单列表"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "订单列表",
|
||||||
|
"group": "订单"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "detail",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "订单详情"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": false,
|
||||||
|
"title": "订单详情",
|
||||||
|
"group": "订单"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "after-sale/detail",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "售后详情"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": false,
|
||||||
|
"title": "售后详情",
|
||||||
|
"group": "订单"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "after-sale/list",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "售后列表"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "售后列表",
|
||||||
|
"group": "订单"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "after-sale/log",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "售后记录"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": false,
|
||||||
|
"title": "售后记录",
|
||||||
|
"group": "订单"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "after-sale/refund",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "申请售后"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": false,
|
||||||
|
"title": "申请售后",
|
||||||
|
"group": "订单"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "express/distribution-detail",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "配送详情"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": false,
|
||||||
|
"title": "配送详情",
|
||||||
|
"group": "订单"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "express/express-detail",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "物流详情"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": false,
|
||||||
|
"title": "物流详情",
|
||||||
|
"group": "订单"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "express/express-list",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "包裹列表"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": false,
|
||||||
|
"title": "包裹列表",
|
||||||
|
"group": "订单"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"path": "express/store-address",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "选择自提点",
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTextStyle": "white"
|
||||||
|
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": false,
|
||||||
|
"title": "选择自提点",
|
||||||
|
"group": "订单"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"root": "pages/public",
|
||||||
|
"pages": [{
|
||||||
|
"path": "faq",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "常见问题"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": false,
|
||||||
|
"async": true,
|
||||||
|
"title": "常见问题",
|
||||||
|
"group": "通用"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "feedback",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "问题反馈"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "问题反馈",
|
||||||
|
"group": "通用"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "chat/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "客服",
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTextStyle": "white"
|
||||||
|
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "客服",
|
||||||
|
"group": "通用"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "search",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "搜索"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": false,
|
||||||
|
"async": true,
|
||||||
|
"title": "搜索",
|
||||||
|
"group": "通用"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "richtext",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": ""
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": false,
|
||||||
|
"async": true,
|
||||||
|
"title": "富文本",
|
||||||
|
"group": "通用"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "webview",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": ""
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": false,
|
||||||
|
"async": true,
|
||||||
|
"title": "外链",
|
||||||
|
"group": "通用"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "404",
|
||||||
|
"name": "404",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "页面不存在"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "loading",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"root": "pages/user",
|
||||||
|
"pages": [{
|
||||||
|
"path": "info",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "个人信息"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "个人信息",
|
||||||
|
"group": "用户"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "set",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "系统设置"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": false,
|
||||||
|
"async": true,
|
||||||
|
"title": "系统设置",
|
||||||
|
"group": "通用"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "view-log",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "浏览足迹"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "浏览足迹",
|
||||||
|
"group": "用户"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "wallet/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "我的钱包"
|
||||||
|
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "钱包",
|
||||||
|
"group": "用户"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "wallet/withdraw",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "提现",
|
||||||
|
"group": "用户"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "wallet/withdraw-log",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "提现记录"
|
||||||
|
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "提现记录",
|
||||||
|
"group": "用户"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "wallet/top-up",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "充值",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "充值",
|
||||||
|
"group": "用户"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "wallet/top-up-log",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "充值记录"
|
||||||
|
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "充值记录",
|
||||||
|
"group": "用户"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "wallet/score-balance",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "积分余额",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "积分余额",
|
||||||
|
"group": "积分"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "address/list",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "收货地址"
|
||||||
|
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "收货地址",
|
||||||
|
"group": "用户"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "address/edit",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": ""
|
||||||
|
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": false,
|
||||||
|
"title": "修改地址",
|
||||||
|
"group": "用户"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "favorite",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "我的收藏"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true,
|
||||||
|
"async": true,
|
||||||
|
"title": "我的收藏",
|
||||||
|
"group": "用户"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"preloadRule": {
|
||||||
|
"pages/index/index": {
|
||||||
|
"network": "all",
|
||||||
|
"packages": ["pages/activity", "pages/user", "pages/goods", "pages/app", "pages/public",
|
||||||
|
"pages/order"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"globalStyle": {
|
||||||
|
"navigationBarTextStyle": "black",
|
||||||
|
"navigationBarTitleText": "shopro-plus",
|
||||||
|
"navigationBarBackgroundColor": "#FFFFFF",
|
||||||
|
"backgroundColor": "#FFFFFF"
|
||||||
|
},
|
||||||
|
"tabBar": {
|
||||||
|
"color": "#333",
|
||||||
|
"selectedColor": "#a8700d",
|
||||||
|
"backgroundColor": "#ffffff",
|
||||||
|
"borderStyle": "black",
|
||||||
|
"list": [{
|
||||||
|
"pagePath": "pages/index/index",
|
||||||
|
"text": "首页",
|
||||||
|
"iconPath": "static/images/tabbar/tabbar_home.png",
|
||||||
|
"selectedIconPath": "/static/images/tabbar/tabbar_home1.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pagePath": "pages/index/category",
|
||||||
|
"text": "分类",
|
||||||
|
"iconPath": "static/images/tabbar/tabbar_category.png",
|
||||||
|
"selectedIconPath": "/static/images/tabbar/tabbar_category1.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pagePath": "pages/index/cart",
|
||||||
|
"text": "购物车",
|
||||||
|
"iconPath": "static/images/tabbar/tabbar_cart.png",
|
||||||
|
"selectedIconPath": "/static/images/tabbar/tabbar_cart1.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pagePath": "pages/index/user",
|
||||||
|
"text": "我的",
|
||||||
|
"iconPath": "static/images/tabbar/tabbar_personal.png",
|
||||||
|
"selectedIconPath": "/static/images/tabbar/tabbar_personal1.png"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,176 @@
|
|||||||
|
<!-- 优惠劵列表 -->
|
||||||
|
<template>
|
||||||
|
<view class="page_box">
|
||||||
|
<view class="head_box u-m-b-20">
|
||||||
|
<shopro-navbar back-icon-color="#333" :background="{ backgroundColor: '#fff' }">
|
||||||
|
<view slot="content" class="u-flex nav-wrap">
|
||||||
|
<view class="nav-item u-flex-1 u-flex-col u-row-center u-col-center" v-for="nav in navbarHeadState" :key="nav.value" @tap="onHead(nav.value)">
|
||||||
|
<view class="item-title" :class="{ 'title-active': navState === nav.value }">{{ nav.title }}</view>
|
||||||
|
<text class="nav-line" :class="{ 'line-active': navState === nav.value }"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</shopro-navbar>
|
||||||
|
<view class="coupon-nav u-flex" v-show="navState === 'user'">
|
||||||
|
<button
|
||||||
|
class=" cu-btn nav-btn u-flex-col u-row-center u-col-center"
|
||||||
|
:class="{ 'btn-active': nav.id == stateCurrent }"
|
||||||
|
v-for="nav in couponsState"
|
||||||
|
:key="nav.id"
|
||||||
|
@tap="onNav(nav.id)"
|
||||||
|
>
|
||||||
|
<view class="item-title">{{ nav.title }}</view>
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="content_box">
|
||||||
|
<view class="coupon-list" v-for="(c, index) in couponList" :key="index" @tap="toCouponDetail(c)">
|
||||||
|
<shopro-coupon :state="stateCurrent" :couponData="c"></shopro-coupon>
|
||||||
|
</view>
|
||||||
|
<!-- 缺省页 -->
|
||||||
|
<shopro-empty marginTop="300rpx" v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_goods.png'" tipText="暂无此类优惠券"></shopro-empty>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
stateCurrent: 0,
|
||||||
|
isEmpty: false,
|
||||||
|
navState: 'event',
|
||||||
|
navbarHeadState: [
|
||||||
|
{
|
||||||
|
value: 'event',
|
||||||
|
title: '领券中心'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'user',
|
||||||
|
title: '我的优惠券'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
couponsState: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: '可使用'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: '暂不可用'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: '无效优惠券'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
couponList: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
onLoad() {
|
||||||
|
this.getCouponList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onNav(id) {
|
||||||
|
if (this.stateCurrent !== id) {
|
||||||
|
this.stateCurrent = id;
|
||||||
|
this.couponList = [];
|
||||||
|
this.getCouponList();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onHead(value) {
|
||||||
|
if (this.navState !== value) {
|
||||||
|
this.navState = value;
|
||||||
|
if (value === 'event') {
|
||||||
|
this.stateCurrent = 0;
|
||||||
|
}
|
||||||
|
if (value === 'user') {
|
||||||
|
this.stateCurrent = 1;
|
||||||
|
}
|
||||||
|
this.couponList = [];
|
||||||
|
this.getCouponList();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
jump(path, parmas) {
|
||||||
|
this.$Router.push({
|
||||||
|
path: path,
|
||||||
|
query: parmas
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getCouponList() {
|
||||||
|
let that = this;
|
||||||
|
that.$http('coupons.list', {
|
||||||
|
type: that.stateCurrent
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code === 1) {
|
||||||
|
that.couponList = res.data;
|
||||||
|
that.isEmpty = !that.couponList.length;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
//跳转优惠券详情
|
||||||
|
toCouponDetail(data) {
|
||||||
|
if (data.user_coupons_id) {
|
||||||
|
this.jump('/pages/app/coupon/detail', { id: data.id, userCouponId: data.user_coupons_id });
|
||||||
|
} else {
|
||||||
|
this.jump('/pages/app/coupon/detail', { id: data.id });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.nav-item {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
.item-title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
.title-active {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.nav-line {
|
||||||
|
width: 128rpx;
|
||||||
|
height: 6rpx;
|
||||||
|
border-radius: 3rpx;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-active {
|
||||||
|
background: #e9b664;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-wrap {
|
||||||
|
/* #ifdef MP-WEIXIN */
|
||||||
|
width: 460rpx;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef MP-WEIXIN */
|
||||||
|
width: 100%;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
.coupon-nav {
|
||||||
|
background: #fff;
|
||||||
|
height: 100rpx;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
.nav-btn {
|
||||||
|
margin-right: 10rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
.btn-active {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #faae0c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.coupon-list {
|
||||||
|
margin: 30rpx 20rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,116 @@
|
|||||||
|
<!-- 门店列表 -->
|
||||||
|
<template>
|
||||||
|
<view class="page_box store-list-wrap">
|
||||||
|
<view class="head_box"></view>
|
||||||
|
<view class="content_box">
|
||||||
|
<label v-for="store in storeList" :key="store.id" @tap="selStore(store.id)">
|
||||||
|
<view class="store-item u-flex u-row-between">
|
||||||
|
<view class="u-flex u-col-center">
|
||||||
|
<view class="img-box"><image class="store-img" :src="store.image_first" mode="aspectFill" lazy-load></image></view>
|
||||||
|
<view class="item-left u-flex-col u-row-left">
|
||||||
|
<text class="store-title">{{ store.name }}</text>
|
||||||
|
<text class="store-content">{{ store.city_name }}{{ store.area_name }}{{ store.address }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<u-checkbox :value="storeId == store.id" activeColor="#4CB89D" shape="circle"></u-checkbox>
|
||||||
|
</view>
|
||||||
|
</label>
|
||||||
|
</view>
|
||||||
|
<view class="foot_box u-flex u-row-between u-col-center"><button class="u-reset-button save-btn" @tap="saveStore">确认</button></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
storeList: [],
|
||||||
|
storeId: uni.getStorageSync('storeId')
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
onLoad() {
|
||||||
|
this.getStoreAddress();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 选择门店
|
||||||
|
selStore(id) {
|
||||||
|
this.storeId = id;
|
||||||
|
},
|
||||||
|
// 确认门店
|
||||||
|
saveStore() {
|
||||||
|
uni.setStorageSync('storeId', this.storeId);
|
||||||
|
if (!this.storeId) {
|
||||||
|
this.$u.toast('请选选择门店');
|
||||||
|
} else {
|
||||||
|
this.$Router.replace({
|
||||||
|
path: '/pages/app/merchant/index'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 获取门店列表
|
||||||
|
getStoreAddress() {
|
||||||
|
let that = this;
|
||||||
|
that.$http('store.list').then(res => {
|
||||||
|
if (res.code == 1) {
|
||||||
|
that.storeList = res.data;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.store-item {
|
||||||
|
padding: 0 30rpx;
|
||||||
|
height: 180rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-bottom: 1rpx solid rgba(223, 223, 223, 0.6);
|
||||||
|
width: 100%;
|
||||||
|
.img-box {
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
.store-img {
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.store-title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgba(52, 52, 52, 1);
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
.store-content {
|
||||||
|
font-size: 24rpx;
|
||||||
|
|
||||||
|
font-weight: 400;
|
||||||
|
color: rgba(102, 102, 102, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.foot_box {
|
||||||
|
height: 100rpx;
|
||||||
|
background: rgba(255, 255, 255, 1);
|
||||||
|
padding: 0 20rpx;
|
||||||
|
.save-btn {
|
||||||
|
width: 710rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
background: linear-gradient(90deg, #2eae9c, #6cc29f);
|
||||||
|
border: 1rpx solid rgba(238, 238, 238, 1);
|
||||||
|
font-size: 30rpx;
|
||||||
|
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,157 @@
|
|||||||
|
<template>
|
||||||
|
<view class="sh-activity-box">
|
||||||
|
<view class="u-flex activity-box u-col-top">
|
||||||
|
<view class="title">优惠</view>
|
||||||
|
<view class="activity-content u-flex-1">
|
||||||
|
<view class="tip-list u-flex u-flex-1 u-col-center" v-for="item in detail" :key="item.id" @tap="showActivity(item.type)">
|
||||||
|
<view class="u-flex u-flex-1 u-col-center">
|
||||||
|
<view class="title-tag cu-tag bg-red sm radius u-m-r-10">{{ item.title }}</view>
|
||||||
|
<view class="tag-box cu-tag line-red sm radius u-m-r-10" v-if="index < 3" v-for="(tag, index) in item.tags" :key="tag">{{ tag }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="u-iconfont uicon-arrow-right" style="color: #bfbfbf;font-size: 28rpx;"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 活动弹窗 -->
|
||||||
|
<u-popup v-if="showModal" v-model="showModal" @close="onClose" mode="bottom" border-radius="30" :closeable="true" close-icon-pos="top-right">
|
||||||
|
<view class="activity-modal-box page_box">
|
||||||
|
<view class="modal-head u-flex u-row-center u-col-center">
|
||||||
|
<text class="head-title">{{ activityMap[activityType].title }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="modal-content content_box">
|
||||||
|
<view class="tip-list u-flex u-flex-1 u-col-center" @tap="toSelGoods">
|
||||||
|
<view class="u-flex u-flex-1 modal-item u-row-between u-col-center">
|
||||||
|
<view class="title-tag cu-tag bg-red sm radius u-m-r-10">{{ activityMap[activityType].title }}</view>
|
||||||
|
<view class="u-flex u-col-center">
|
||||||
|
<view class="tag-box cu-tag line-red sm radius u-m-r-10" v-for="(tag, index) in activityMap[activityType].tags" :key="tag">{{ tag }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="u-iconfont uicon-arrow-right" style="color: #bfbfbf;font-size: 28rpx;"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="all-goods-num">共有{{ activityMap[activityType].num }}件商品参加此活动</view>
|
||||||
|
</view>
|
||||||
|
<view class="modal-foot u-flex u-row-center u-col-center"><button class=" u-reset-button serve-btn" @tap="toSelGoods">去凑单</button></view>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* 参与优惠活动卡片
|
||||||
|
* @property {Array} detail - 优惠活动详情列表
|
||||||
|
* @property {Boolean} showModal- 显隐
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showModal: false,
|
||||||
|
activityType: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
detail: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
computed: {
|
||||||
|
activityMap() {
|
||||||
|
let obj = {};
|
||||||
|
this.detail.forEach(item => {
|
||||||
|
obj[item.type] = item;
|
||||||
|
obj[item.type].num = item.goods_ids.split(',').length;
|
||||||
|
});
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 显示
|
||||||
|
showActivity(type) {
|
||||||
|
this.activityType = type;
|
||||||
|
this.showModal = true;
|
||||||
|
},
|
||||||
|
// 关闭
|
||||||
|
onClose() {
|
||||||
|
this.activityType = '';
|
||||||
|
this.showModal = false;
|
||||||
|
},
|
||||||
|
// 去凑单
|
||||||
|
toSelGoods() {
|
||||||
|
this.$Router.push({
|
||||||
|
path: '/pages/activity/discounts/list',
|
||||||
|
query: this.activityMap[this.activityType]
|
||||||
|
});
|
||||||
|
this.activityType = '';
|
||||||
|
this.showModal = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.activity-box {
|
||||||
|
background: #fff;
|
||||||
|
padding: 30rpx 20rpx 0;
|
||||||
|
margin: 10rpx 0;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
.activity-content {
|
||||||
|
.tip-list {
|
||||||
|
font-size: 28rpx;
|
||||||
|
width: 100%;
|
||||||
|
padding-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 弹窗
|
||||||
|
.activity-modal-box {
|
||||||
|
width: 750rpx;
|
||||||
|
min-height: 700rpx;
|
||||||
|
border-radius: 30rpx 30rpx 0 0;
|
||||||
|
background: #fff;
|
||||||
|
padding: 30rpx;
|
||||||
|
.serve-btn {
|
||||||
|
width: 690rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
background: linear-gradient(90deg, rgba(240, 199, 133, 1), rgba(246, 214, 157, 1));
|
||||||
|
border-radius: 40rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: rgba(#fff, 0.9);
|
||||||
|
margin-top: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-head {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
position: relative;
|
||||||
|
.head-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
overflow-y: auto;
|
||||||
|
.tip-list {
|
||||||
|
font-size: 28rpx;
|
||||||
|
width: 100%;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
border-bottom: 1rpx solid #eeeeee;
|
||||||
|
}
|
||||||
|
.all-goods-num {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333333;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,100 @@
|
|||||||
|
<template>
|
||||||
|
<view class="comment-box">
|
||||||
|
<view class="head u-flex u-row-between">
|
||||||
|
<view class="u-flex">
|
||||||
|
<image class="avatar" :src="comment.user ? comment.user.avatar : $IMG_URL + '/imgs/base_avatar.png'" mode="aspectFill"></image>
|
||||||
|
<view class="user-name u-ellipsis-1">{{ comment.user ? comment.user.nickname : '***' }}</view>
|
||||||
|
<u-rate :value="comment.level" disabled></u-rate>
|
||||||
|
</view>
|
||||||
|
<text class="time">{{ $u.timeFormat(comment.createtime, 'yyyy-mm-dd hh:MM') }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="detail">{{ comment.content }}</view>
|
||||||
|
<view class="img-box u-flex u-row-center u-col-center">
|
||||||
|
<view class="nav u-flex u-flex-wrap">
|
||||||
|
<image
|
||||||
|
v-for="(img, index) in comment.images"
|
||||||
|
:key="index"
|
||||||
|
@tap.stop="tools.previewImage(comment.images, index)"
|
||||||
|
class="comment-img"
|
||||||
|
:src="img"
|
||||||
|
mode="aspectFill"
|
||||||
|
></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* 评论信息卡片
|
||||||
|
* @property {Object} comment - 评论信息
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
comment: {}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.comment-box {
|
||||||
|
padding: 30rpx 20rpx;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
.head {
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 52rpx;
|
||||||
|
height: 52rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-name {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
width: 140rpx;
|
||||||
|
margin: 0 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #c4c4c4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(102, 102, 102, 1);
|
||||||
|
line-height: 42rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-box {
|
||||||
|
margin-top: 30rpx;
|
||||||
|
position: relative;
|
||||||
|
.nav {
|
||||||
|
width: 670rpx;
|
||||||
|
}
|
||||||
|
.comment-img {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
background: #ccc;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
&:nth-child(4n) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
<template>
|
||||||
|
<view class="category-box u-m-b-10">
|
||||||
|
<swiper class="swiper-box" @change="onSwiper" circular :autoplay="false" :interval="3000" :duration="1000">
|
||||||
|
<swiper-item v-for="(c, index) in couponList" :key="c.id">
|
||||||
|
<view class="tab-list u-flex u-row-center u-col-center"><shopro-coupon :couponData="c" :state="0"></shopro-coupon></view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
<view class="category-dots">
|
||||||
|
<text :class="categoryCurrent === index ? 'category-dot-active' : 'category-dot'" v-for="(dot, index) in couponList.length" :key="index"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* 详情优惠券轮播 - 详情专用
|
||||||
|
* @property {Object} couponList - 优惠劵列表
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
categoryCurrent: 0 //分类轮播下标
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
couponList: {}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {
|
||||||
|
// 轮播
|
||||||
|
onSwiper(e) {
|
||||||
|
this.categoryCurrent = e.detail.current;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.category-box {
|
||||||
|
padding-top: 20rpx;
|
||||||
|
background: #fff;
|
||||||
|
height: 230rpx;
|
||||||
|
position: relative;
|
||||||
|
.swiper-box {
|
||||||
|
height: 210rpx;
|
||||||
|
.tab-list {
|
||||||
|
/deep/.coupon-wrap {
|
||||||
|
width: 710rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.category-dots {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
bottom: 15rpx;
|
||||||
|
|
||||||
|
.category-dot {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 3rpx;
|
||||||
|
background: #eeeeee;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-dot-active {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 3rpx;
|
||||||
|
background: #a8700d;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,168 @@
|
|||||||
|
<template>
|
||||||
|
<view class="filter-box">
|
||||||
|
<view class="cu-modal" style="z-index: -1;" :class="{ show: showSel }" @tap="hideModal"></view>
|
||||||
|
<view class="navbar">
|
||||||
|
<view class="sel-box u-flex-col" v-show="showSel">
|
||||||
|
<view class="sel-item" @tap="onSel(0)" :class="{ 'sel-active': defaultOrder === 0 && filterIndex === 0 }">综合推荐</view>
|
||||||
|
<view class="sel-item" @tap="onSel(1)" :class="{ 'sel-active': defaultOrder === 1 && filterIndex === 0 }">扩展自定义排序</view>
|
||||||
|
</view>
|
||||||
|
<view class="nav-item u-flex-col" :class="{ current: filterIndex === 0 }" @tap="tabClick(0)">
|
||||||
|
<view class="title-box u-flex u-col-center">
|
||||||
|
<text class="filter-title">{{ defaultOrder === 1 ? '自定义' : '综合推荐' }}</text>
|
||||||
|
<view class="p-box"><text style="font-size: 22rpx;" :class="{ active: filterIndex === 0 }" class="u-iconfont uicon-arrow-up u-m-l-6"></text></view>
|
||||||
|
</view>
|
||||||
|
<view class="line" :class="{ 'line-active': filterIndex === 0 }"></view>
|
||||||
|
</view>
|
||||||
|
<view class="nav-item u-flex-col" :class="{ current: filterIndex === 1 }" @tap="tabClick(1)">
|
||||||
|
<view class="title-box u-flex"><text class="filter-title">销量</text></view>
|
||||||
|
<view class="line" :class="{ 'line-active': filterIndex === 1 }"></view>
|
||||||
|
</view>
|
||||||
|
<view class="nav-item u-flex-col" :class="{ current: filterIndex === 2 }" @tap="tabClick(2)">
|
||||||
|
<view class="title-box u-flex">
|
||||||
|
<text class="filter-title">价格</text>
|
||||||
|
<view class="p-box u-flex-col u-m-l-6">
|
||||||
|
<view
|
||||||
|
class="u-iconfont uicon-arrow-up"
|
||||||
|
:style="{ fontSize: '20rpx', lineHeight: '18rpx', color: priceOrder === 1 && filterIndex === 2 ? '#d5a65a' : '#333' }"
|
||||||
|
></view>
|
||||||
|
<view
|
||||||
|
class="u-iconfont uicon-arrow-down"
|
||||||
|
:style="{ fontSize: '20rpx', lineHeight: '18rpx', color: priceOrder === 2 && filterIndex === 2 ? '#d5a65a' : '#333' }"
|
||||||
|
></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="line" :class="{ 'line-active': filterIndex === 2 }"></view>
|
||||||
|
</view>
|
||||||
|
<view class="nav-item u-flex-col" :class="{ current: filterIndex === 3 }" @tap="tabClick(3)">
|
||||||
|
<view class="title-box"><text class="filter-title">新品优先</text></view>
|
||||||
|
<view class="line" :class="{ 'line-active': filterIndex === 3 }"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* 商品筛选组件
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
import { mapState, mapActions, mapMutations } from 'vuex';
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
filterIndex: 0,
|
||||||
|
showSel: false, //综合选择
|
||||||
|
defaultOrder: 0, //综合
|
||||||
|
priceOrder: 0, //价格
|
||||||
|
salesOrder: 0, //销量
|
||||||
|
newProdcutOrder: 0 //新品优先
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
filterData() {
|
||||||
|
const data = {
|
||||||
|
defaultOrder: this.defaultOrder,
|
||||||
|
priceOrder: this.priceOrder,
|
||||||
|
salesOrder: this.salesOrder,
|
||||||
|
newProdcutOrder: this.newProdcutOrder
|
||||||
|
};
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {},
|
||||||
|
methods: {
|
||||||
|
//筛选
|
||||||
|
tabClick(index) {
|
||||||
|
this.filterIndex = index;
|
||||||
|
index === 0 ? (this.showSel = !this.showSel) : (this.showSel = false);
|
||||||
|
index === 1 ? (this.salesOrder = 1) : (this.salesOrder = 0);
|
||||||
|
index === 2 ? (this.priceOrder = this.priceOrder === 1 ? 2 : 1) : (this.priceOrder = 0);
|
||||||
|
index === 3 ? (this.newProdcutOrder = 1) : (this.newProdcutOrder = 0);
|
||||||
|
this.$emit('change', this.filterData);
|
||||||
|
},
|
||||||
|
onSel(dot) {
|
||||||
|
this.defaultOrder = dot;
|
||||||
|
this.$emit('change', this.filterData);
|
||||||
|
this.showSel = false;
|
||||||
|
},
|
||||||
|
hideModal() {
|
||||||
|
this.showSel = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.sel-box {
|
||||||
|
position: absolute;
|
||||||
|
width: 750rpx;
|
||||||
|
height: 140rpx;
|
||||||
|
background: rgba(246, 246, 246, 1);
|
||||||
|
border-radius: 0px 0px 20rpx 20rpx;
|
||||||
|
z-index: 999;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
bottom: -138rpx;
|
||||||
|
transition: all ease-out 0.2s;
|
||||||
|
.sel-item {
|
||||||
|
color: #333;
|
||||||
|
padding: 20rpx 40rpx 0;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.sel-active {
|
||||||
|
color: #d5a65a;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.filter-box {
|
||||||
|
width: 750rpx;
|
||||||
|
}
|
||||||
|
.navbar {
|
||||||
|
display: flex;
|
||||||
|
width: 750rpx;
|
||||||
|
height: 95rpx;
|
||||||
|
background: #fff;
|
||||||
|
border-bottom: 1upx solid #e6e6e6;
|
||||||
|
position: relative;
|
||||||
|
z-index: 999;
|
||||||
|
.nav-item {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
font-size: 30rpx;
|
||||||
|
position: relative;
|
||||||
|
.filter-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
width: 110rpx;
|
||||||
|
height: 4rpx;
|
||||||
|
background: transparent;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-active {
|
||||||
|
background: rgba(213, 166, 90, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-box {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.current {
|
||||||
|
color: #d5a65a;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,220 @@
|
|||||||
|
<template>
|
||||||
|
<view class="group-people">
|
||||||
|
<block v-if="grouponTeamList.length">
|
||||||
|
<view class="into-title u-flex u-row-between">
|
||||||
|
<text>已有{{ grouponData.sales }}人参与活动</text>
|
||||||
|
<view class="u-iconfont uicon-arrow-right" style="color: #bfbfbf;font-size: 28rpx;" @tap="onMoreGrouponTeam"></view>
|
||||||
|
</view>
|
||||||
|
<view class="into-item u-flex u-row-between" v-for="(g, index) in grouponTeamList" :key="g.id" v-if="index < 2">
|
||||||
|
<view class="u-flex">
|
||||||
|
<image class="into-img" :src="g.leader.user_avatar" mode="aspectFill"></image>
|
||||||
|
<text class="into-name">{{ g.leader.user_nickname }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="u-flex">
|
||||||
|
<view class="">
|
||||||
|
<view class="num">
|
||||||
|
还差
|
||||||
|
<text class="num-color">{{ g.num - g.current_num }}人</text>
|
||||||
|
成团
|
||||||
|
</view>
|
||||||
|
<view class="time" v-if="g.expiretime && g.time">剩余时间{{ g.time.h }}:{{ g.time.m }}:{{ g.time.s }}</view>
|
||||||
|
</view>
|
||||||
|
<button class="u-reset-button join-btn" @tap="jump('/pages/activity/groupon/detail', { id: g.id })">去参团</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
<!-- 弹窗 -->
|
||||||
|
<u-popup v-model="showModal" mode="bottom" :closeable="true" close-icon-pos="top-right">
|
||||||
|
<view class="modal-box page_box">
|
||||||
|
<view class="modal-head u-flex u-row-center">
|
||||||
|
<text class="head-title">正在拼团</text>
|
||||||
|
</view>
|
||||||
|
<view class="modal-content content_box y-f">
|
||||||
|
<view class="into-item u-flex u-row-between" v-for="g in grouponTeamList" :key="g.id">
|
||||||
|
<view class="u-flex">
|
||||||
|
<image class="into-img" :src="g.leader.user_avatar" mode="aspectFill"></image>
|
||||||
|
<text class="into-name">{{ g.leader.user_nickname }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="u-flex">
|
||||||
|
<view class="y-end">
|
||||||
|
<view class="num">
|
||||||
|
还差
|
||||||
|
<text class="num-color">{{ g.num - g.current_num }}人</text>
|
||||||
|
成团
|
||||||
|
</view>
|
||||||
|
<view class="time" v-if="g.expiretime && g.time">剩余时间{{ g.time.h }}:{{ g.time.m }}:{{ g.time.s }}</view>
|
||||||
|
</view>
|
||||||
|
<button class="u-reset-button join-btn" @tap="joinTeam('/pages/activity/groupon/detail', { id: g.id })">去参团</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="modal-foot u-flex u-row-center u-col-center">仅显示10个正在拼团的人</view>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* 商品已拼团卡片
|
||||||
|
* @property {Object} grouponData - 商品已拼团信息
|
||||||
|
*/
|
||||||
|
let timer;
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
grouponTeamList: [], //原数组
|
||||||
|
showModal: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
grouponData: {}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
beforeDestroy() {
|
||||||
|
clearInterval(timer);
|
||||||
|
timer=null
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getGrouponItem();
|
||||||
|
let that = this;
|
||||||
|
|
||||||
|
timer = setInterval(() => {
|
||||||
|
that.grouponTeamList.forEach((item, index) => {
|
||||||
|
let nowTime = new Date().getTime();
|
||||||
|
let endTime = item.expiretime * 1000;
|
||||||
|
let t = (endTime - nowTime) / 1000;
|
||||||
|
let time = that.$tools.format(t);
|
||||||
|
that.$set(that.grouponTeamList[index], 'time', time);
|
||||||
|
});
|
||||||
|
}, 1000);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
hideModal() {
|
||||||
|
this.showModal = false;
|
||||||
|
},
|
||||||
|
jump(path, parmas) {
|
||||||
|
this.$Router.push({
|
||||||
|
path: path,
|
||||||
|
query: parmas
|
||||||
|
});
|
||||||
|
},
|
||||||
|
joinTeam(path, parmas) {
|
||||||
|
this.showModal = false;
|
||||||
|
this.$Router.push({
|
||||||
|
path: path,
|
||||||
|
query: parmas
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onMoreGrouponTeam() {
|
||||||
|
this.showModal = true;
|
||||||
|
},
|
||||||
|
// 拼购人
|
||||||
|
getGrouponItem() {
|
||||||
|
let that = this;
|
||||||
|
that.$http('goods.grouponItem', {
|
||||||
|
goods_id: that.grouponData.id,
|
||||||
|
activity_id: that.grouponData.activity.id
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code === 1) {
|
||||||
|
that.grouponTeamList = res.data;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
// 弹窗
|
||||||
|
.modal-box {
|
||||||
|
width: 750rpx;
|
||||||
|
height: 800rpx;
|
||||||
|
border-radius: 30rpx 30rpx 0 0;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
.modal-head {
|
||||||
|
height: 92rpx;
|
||||||
|
border-bottom: 1px solid rgba(223, 223, 223, 0.5);
|
||||||
|
padding: 0 30rpx;
|
||||||
|
.head-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
padding: 0 30rpx;
|
||||||
|
}
|
||||||
|
.modal-foot {
|
||||||
|
font-size: 24rpx;
|
||||||
|
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(153, 153, 153, 1);
|
||||||
|
height: 80rpx;
|
||||||
|
border-top: 1px solid rgba(223, 223, 223, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 拼团人数
|
||||||
|
.group-people {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
|
||||||
|
.into-title {
|
||||||
|
height: 80rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.into-item {
|
||||||
|
height: 120rpx;
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
|
||||||
|
.into-img {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 23rpx;
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.into-name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(102, 102, 102, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.num {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
|
||||||
|
.num-color {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #a8700d;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-size: 22rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.join-btn {
|
||||||
|
width: 140rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
background: linear-gradient(90deg, rgba(254, 131, 42, 1), rgba(255, 102, 0, 1));
|
||||||
|
box-shadow: 0px 7rpx 6rpx 0px rgba(255, 104, 4, 0.22);
|
||||||
|
border-radius: 30rpx;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 26rpx;
|
||||||
|
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
margin-left: 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,140 @@
|
|||||||
|
<template>
|
||||||
|
<view class="sh-server-box">
|
||||||
|
<view class="u-flex u-row-between serve-box" @tap="showModal = true">
|
||||||
|
<view class="u-flex">
|
||||||
|
<text class="title">服务</text>
|
||||||
|
<view class="tip u-flex">
|
||||||
|
<view class="tip-list u-flex" v-for="(serve, index) in serveList" :key="serve.title">
|
||||||
|
<view class="u-flex" v-if="index < 3">
|
||||||
|
<image class="tip-img" :src="serve.image" mode=""></image>
|
||||||
|
<text>{{ serve.name }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="u-iconfont uicon-arrow-right" style="color: #bfbfbf;font-size: 28rpx;"></view>
|
||||||
|
</view>
|
||||||
|
<u-popup v-model="showModal" mode="bottom" :closeable="true" close-icon-pos="top-right">
|
||||||
|
<view class=" server-modal">
|
||||||
|
<view class="server-modal-box page_box">
|
||||||
|
<view class="modal-head u-flex u-row-center u-col-center"><text class="head-title">服务保障</text></view>
|
||||||
|
<view class="modal-content content_box">
|
||||||
|
<view class="serve-list" v-for="serve in serveList" :key="serve.title">
|
||||||
|
<view class="title-box u-flex">
|
||||||
|
<image class="title-tag" :src="serve.image" mode=""></image>
|
||||||
|
<text class="serve-title">{{ serve.name }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="serve-detail">{{ serve.description }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="modal-foot u-flex u-row-center u-col-center"><button class=" u-reset-button serve-btn" @tap="showModal = false">确定</button></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* 商品服务卡片
|
||||||
|
* @property {Array} serveList - 商品服务列表
|
||||||
|
* @property {Boolean} showModal- 显隐
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showModal: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
serveList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.serve-box {
|
||||||
|
line-height: 82rpx;
|
||||||
|
background: #fff;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
margin: 10rpx 0;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip {
|
||||||
|
.tip-list {
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
|
||||||
|
.tip-img {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.server-modal-box {
|
||||||
|
width: 750rpx;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 30rpx 30rpx 0 0;
|
||||||
|
background: #fff;
|
||||||
|
padding: 30rpx;
|
||||||
|
.serve-btn {
|
||||||
|
width: 690rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
background: linear-gradient(90deg, rgba(240, 199, 133, 1), rgba(246, 214, 157, 1));
|
||||||
|
border-radius: 40rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: rgba(#fff, 0.9);
|
||||||
|
margin-top: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-head {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
position: relative;
|
||||||
|
.head-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
overflow-y: auto;
|
||||||
|
.serve-list {
|
||||||
|
padding-bottom: 40rpx;
|
||||||
|
|
||||||
|
.title-tag {
|
||||||
|
width: 38rpx;
|
||||||
|
height: 38rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serve-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serve-detail {
|
||||||
|
text-align: left;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
line-height: 42rpx;
|
||||||
|
padding-left: 58rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,174 @@
|
|||||||
|
<template>
|
||||||
|
<view class="adv-box u-m-y-10 u-m-x-20">
|
||||||
|
<!-- 模板1-->
|
||||||
|
<view class="u-flex" v-if="advType === 1">
|
||||||
|
<image style="width:710rpx;height:220rpx;border-radius: 10rpx;" @tap="jump(advList[0].path)" :src="advList[0].image" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<!-- 模板2-->
|
||||||
|
<view class="type1 u-flex" v-if="advType === 2">
|
||||||
|
<image class="type1-img u-m-r-10" @tap="jump(advList[0].path)" :src="advList[0].image" mode="aspectFill"></image>
|
||||||
|
<image class="type1-img" @tap="jump(advList[1].path)" :src="advList[1].image" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<!-- 模板3-->
|
||||||
|
<view class="type2 u-flex" v-if="advType === 3">
|
||||||
|
<view class="type2-img1 u-m-r-10"><image class="type2-img1 " @tap="jump(advList[0].path)" :src="advList[0].image" mode="aspectFill"></image></view>
|
||||||
|
<view class="type2-box">
|
||||||
|
<image class="type2-img2" @tap="jump(advList[1].path)" :src="advList[1].image" mode="aspectFill"></image>
|
||||||
|
<image class="type2-img2" @tap="jump(advList[2].path)" :src="advList[2].image" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 模板4-->
|
||||||
|
<view class="type3 u-flex" v-if="advType === 4">
|
||||||
|
<view class="type3-box">
|
||||||
|
<image class="type3-img1" @tap="jump(advList[0].path)" :src="advList[0].image" mode="aspectFill"></image>
|
||||||
|
<image class="type3-img1" @tap="jump(advList[1].path)" :src="advList[1].image" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="type3-img2 u-m-l-10"><image class="type3-img2" @tap="jump(advList[2].path)" :src="advList[2].image" mode="aspectFill"></image></view>
|
||||||
|
</view>
|
||||||
|
<!-- 模板5-->
|
||||||
|
<view class="type4 " v-if="advType === 5">
|
||||||
|
<view class="type4-box u-flex">
|
||||||
|
<image class="type4-img1 u-m-r-10" @tap="jump(advList[0].path)" :src="advList[0].image" mode="aspectFill"></image>
|
||||||
|
<image class="type4-img1" @tap="jump(advList[1].path)" :src="advList[1].image" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="type4-img2 u-m-t-10"><image class="type4-img2" @tap="jump(advList[2].path)" :src="advList[2].image" mode="aspectFill"></image></view>
|
||||||
|
</view>
|
||||||
|
<!-- 模板6-->
|
||||||
|
<view class="type5" v-if="advType === 6">
|
||||||
|
<view class="type5-img1 u-m-b-10"><image class="type5-img1" @tap="jump(advList[0].path)" :src="advList[0].image" mode="aspectFill"></image></view>
|
||||||
|
<view class="type5-box u-flex">
|
||||||
|
<image class="type5-img2 u-m-r-10" @tap="jump(advList[1].path)" :src="advList[1].image" mode="aspectFill"></image>
|
||||||
|
<image class="type5-img2" @tap="jump(advList[2].path)" :src="advList[2].image" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 模板7-->
|
||||||
|
<view class="type6" v-if="advType === 7">
|
||||||
|
<view class="u-flex type6-box1 u-m-b-10">
|
||||||
|
<image class="type6-img1 u-m-r-10" @tap="jump(advList[0].path)" :src="advList[0].image" mode="aspectFill"></image>
|
||||||
|
<image class="type6-img1" @tap="jump(advList[1].path)" :src="advList[1].image" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="u-flex type6-box2">
|
||||||
|
<image class="type6-img2 u-m-r-10" @tap="jump(advList[2].path)" :src="advList[2].image" mode="aspectFill"></image>
|
||||||
|
<image class="type6-img2 u-m-r-10" @tap="jump(advList[3].path)" :src="advList[3].image" mode="aspectFill"></image>
|
||||||
|
<image class="type6-img2" @tap="jump(advList[4].path)" :src="advList[4].image" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* 自定义之广告魔方
|
||||||
|
* @property {Object} detail -广告魔方信息
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
advType: this.detail.style ,// 模板样式
|
||||||
|
advList:this.detail.list // adv数据
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
detail: {}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
created() {},
|
||||||
|
methods: {
|
||||||
|
// 路由跳转
|
||||||
|
jump(path) {
|
||||||
|
this.$tools.routerTo(path);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@mixin grid($row: 1) {
|
||||||
|
width: (710 - ($row - 1) * 10) / $row + rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
}
|
||||||
|
.adv-box {
|
||||||
|
.type1 {
|
||||||
|
.type1-img {
|
||||||
|
@include grid(2);
|
||||||
|
height: 220rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.type2 {
|
||||||
|
.type2-img1 {
|
||||||
|
height: 350rpx;
|
||||||
|
@include grid(2);
|
||||||
|
}
|
||||||
|
.type2-box {
|
||||||
|
height: 350rpx;
|
||||||
|
@include grid(2);
|
||||||
|
.type2-img2 {
|
||||||
|
height: 170rpx;
|
||||||
|
@include grid(2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.type3 {
|
||||||
|
.type3-box {
|
||||||
|
height: 350rpx;
|
||||||
|
@include grid(2);
|
||||||
|
.type3-img1 {
|
||||||
|
height: 170rpx;
|
||||||
|
@include grid(2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.type3-img2 {
|
||||||
|
height: 350rpx;
|
||||||
|
@include grid(2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.type4 {
|
||||||
|
.type4-box {
|
||||||
|
.type4-img1 {
|
||||||
|
height: 170rpx;
|
||||||
|
@include grid(2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.type4-img2 {
|
||||||
|
@include grid(1);
|
||||||
|
height: 220rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.type5 {
|
||||||
|
.type5-img1 {
|
||||||
|
@include grid(1);
|
||||||
|
height: 220rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type5-box {
|
||||||
|
.type5-img2 {
|
||||||
|
height: 170rpx;
|
||||||
|
@include grid(2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.type6 {
|
||||||
|
.type6-box1 {
|
||||||
|
.type6-img1 {
|
||||||
|
height: 170rpx;
|
||||||
|
@include grid(2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.type6-box2 {
|
||||||
|
.type6-img2 {
|
||||||
|
height: 170rpx;
|
||||||
|
@include grid(3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,56 @@
|
|||||||
|
<template>
|
||||||
|
<view class="sh-user-menu-box u-m-b-10">
|
||||||
|
<view class="menu-item u-flex u-row-between u-border-bottom" hover-stay-time="150" hover-class="u-cell-hover" v-for="(item, index) in list" :key="index" @tap="jump(item)">
|
||||||
|
<view class="menu-head u-flex u-col-center">
|
||||||
|
<image class="menu-img u-m-r-10" :src="item.image" mode=""></image>
|
||||||
|
<view class="menu-title ">{{ item.name }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="u-iconfont uicon-arrow-right" style="color: #969799;font-size: 28rpx;"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
*shCell-功能列表
|
||||||
|
* @property {Array} list - 列表信息
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {
|
||||||
|
jump(data) {
|
||||||
|
this.$tools.routerTo(data.path);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.menu-item {
|
||||||
|
background-color: #fff;
|
||||||
|
width: 100%;
|
||||||
|
padding: 26rpx 32rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 54rpx;
|
||||||
|
.menu-img {
|
||||||
|
width: 36rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
}
|
||||||
|
.menu-title {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,134 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 产品分类导航 -->
|
||||||
|
<view class="wrap">
|
||||||
|
<view class="menu-category-box u-m-b-10" :style="list.length <= oneRowNum ? `height:180rpx` : `height:380rpx`">
|
||||||
|
<swiper
|
||||||
|
class="menu-swiper-box"
|
||||||
|
@change="onSwiper"
|
||||||
|
:style="list.length <= oneRowNum ? `height:160rpx` : `height:380rpx`"
|
||||||
|
circular
|
||||||
|
:autoplay="false"
|
||||||
|
:interval="3000"
|
||||||
|
:duration="1000"
|
||||||
|
>
|
||||||
|
<swiper-item class="menu-swiper-item" v-for="(itemList, index) in newList" :key="index">
|
||||||
|
<view class="menu-tab-box u-flex u-flex-wrap">
|
||||||
|
<view
|
||||||
|
class="tab-list u-flex-col u-col-center u-row-center"
|
||||||
|
:style="{ width: 100 / oneRowNum + '%' }"
|
||||||
|
v-for="(item, index) in itemList"
|
||||||
|
:key="index"
|
||||||
|
@tap="$tools.routerTo(item.path)"
|
||||||
|
>
|
||||||
|
<image class="tab-img" :src="item.image"></image>
|
||||||
|
<text class="">{{ item.name }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
<view class="menu-category-dots" v-if="newList.length > 1">
|
||||||
|
<text :class="categoryCurrent === index ? 'category-dot-active' : 'category-dot'" v-for="(dot, index) in newList.length" :key="index"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* shGridSwiper-滑动宫格列表
|
||||||
|
* @property {Array} list - 列表数据
|
||||||
|
* @property {Number|String} oneRowNum - 单行数量
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
categoryCurrent: 0 ,//分类轮播下标
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
oneRowNum: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 5
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
newList() {
|
||||||
|
if (this.list.length) {
|
||||||
|
let data = this.$tools.splitData(this.list, this.oneRowNum * 2);
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 轮播
|
||||||
|
onSwiper(e) {
|
||||||
|
this.categoryCurrent = e.detail.current;
|
||||||
|
},
|
||||||
|
jump(path, query) {
|
||||||
|
this.$Router.push({
|
||||||
|
path: path,
|
||||||
|
query: query
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
// 产品分类
|
||||||
|
.menu-category-box,
|
||||||
|
.menu-swiper-box {
|
||||||
|
position: relative;
|
||||||
|
background: #fff;
|
||||||
|
.menu-swiper-item {
|
||||||
|
background: #fff;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.menu-tab-box {
|
||||||
|
.tab-list {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(51, 51, 51, 1);
|
||||||
|
margin: 20rpx 0;
|
||||||
|
.tab-img {
|
||||||
|
width: 98rpx;
|
||||||
|
height: 98rpx;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-category-dots {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
bottom: 10rpx;
|
||||||
|
|
||||||
|
.category-dot {
|
||||||
|
width: 12rpx;
|
||||||
|
height: 12rpx;
|
||||||
|
background: #eeeeee;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-dot-active {
|
||||||
|
width: 12rpx;
|
||||||
|
height: 12rpx;
|
||||||
|
background: #e9b461;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
<template>
|
||||||
|
<view class="grid-wap u-m-b-10 u-flex u-flex-wrap u-col-center" v-if="list.length">
|
||||||
|
<view class="grid-item u-flex-col u-row-center u-col-center" v-for="(menu, index) in list" :key="index" @tap="jump(menu)">
|
||||||
|
<image class="tool-img" :src="menu.image" mode="aspectFill"></image>
|
||||||
|
<view class="item-title">{{ menu.name }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* shGrid-宫格列表
|
||||||
|
* @property {Array} list - 宫格列表
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
props: {
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
methods: {
|
||||||
|
jump(data) {
|
||||||
|
this.$tools.routerTo(data.path);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
// 宫格
|
||||||
|
.grid-wap {
|
||||||
|
background: #fff;
|
||||||
|
width: 750rpx;
|
||||||
|
padding: 30rpx 0 0;
|
||||||
|
.grid-item {
|
||||||
|
width: 25%;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
.tool-img {
|
||||||
|
width: 44rpx;
|
||||||
|
height: 44rpx;
|
||||||
|
}
|
||||||
|
.item-title {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(153, 153, 153, 1);
|
||||||
|
line-height: 24rpx;
|
||||||
|
padding-top: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,319 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 活动商品 -->
|
||||||
|
<view class="activity-wrap u-p-x-20 u-p-b-20 u-m-b-10 groupon-card" v-if="showActivity">
|
||||||
|
<!-- 标题栏 -->
|
||||||
|
<view class="title-box u-flex u-row-between u-p-y-20 groupon-title">
|
||||||
|
<view class="u-flex u-col-center">
|
||||||
|
<view class="title-text u-m-r-20 u-ellipsis-1">{{ detail.name }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="more-box u-flex" @tap="$Router.push('/pages/activity/groupon/list')">
|
||||||
|
<text class="more-text u-m-r-10">更多拼团</text>
|
||||||
|
<text class="iconfont icon-youjiantou-tianchong more-icon"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 活动商品 -->
|
||||||
|
<!-- m -->
|
||||||
|
<scroll-view v-if="grouponType === 1" class="scroll-box" scroll-x scroll-anchoring>
|
||||||
|
<view class="goods-box u-flex">
|
||||||
|
<view class="min-goods u-m-r-14" v-for="mgoods in goodsList" :key="mgoods.id" @tap="jump('/pages/goods/detail', { id: mgoods.id })">
|
||||||
|
<view class="img-box"><image class="img" :src="mgoods.image" mode=""></image></view>
|
||||||
|
<view class="mgoods-card-bottom u-p-20">
|
||||||
|
<view class="goods-title u-m-b-10 u-ellipsis-1">{{ mgoods.title }}</view>
|
||||||
|
<view class="price u-m-b-10">{{ mgoods.groupon_price }}</view>
|
||||||
|
<view class="groupon-num-box u-flex u-col-center" v-if="mgoods.buyers.length">
|
||||||
|
<view class="avatar-box"><image class="avatar-img u-m-r-10" :src="mgoods.buyers[0].avatar" mode=""></image></view>
|
||||||
|
<view class="groupon-num-text">{{ mgoods.sales }}人正在拼</view>
|
||||||
|
</view>
|
||||||
|
<view class="original-price" v-else>￥{{ mgoods.original_price }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<!--b-->
|
||||||
|
<view
|
||||||
|
v-if="grouponType === 2"
|
||||||
|
class="big-goods u-flex u-p-20 u-col-top u-m-b-16"
|
||||||
|
v-for="item in goodsList"
|
||||||
|
:key="item.id"
|
||||||
|
@tap="jump('/pages/goods/detail', { id: item.id })"
|
||||||
|
>
|
||||||
|
<image class="goods-img" :src="item.image" mode="aspectFill"></image>
|
||||||
|
<view class=" card-right u-m-l-20 u-flex-col u-row-between">
|
||||||
|
<view class="">
|
||||||
|
<view class="goods-title u-ellipsis-1 u-m-t-10 u-m-b-10">
|
||||||
|
<view class=" sm cu-tag radius title-tag u-m-r-10" style="{ backgroundColor: #FF6600, color: '#fff' }">拼团</view>
|
||||||
|
{{ item.title }}
|
||||||
|
</view>
|
||||||
|
<view v-show="item.subtitle" class="subtitle-text u-m-b-10 u-ellipsis-1">{{ item.subtitle }}</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="u-flex u-m-y-20">
|
||||||
|
<view class="sell-box">
|
||||||
|
<text class=" hot-icon iconfont icon-icon-test"></text>
|
||||||
|
<text class="sell-num">已拼{{ item.sales }}件</text>
|
||||||
|
</view>
|
||||||
|
<text class="group-num">{{ item.activity.rules.team_num || 0 }}人团</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class=" u-flex u-row-between u-col-center">
|
||||||
|
<view class="u-flex u-col-bottom font-OPPOSANS">
|
||||||
|
<view class="price u-m-r-10">{{ item.groupon_price }}</view>
|
||||||
|
<view class="origin-price">{{ item.original_price }}</view>
|
||||||
|
</view>
|
||||||
|
<button class="u-reset-button buy-btn" @tap.stop="$Router.push({ path: '/pages/goods/detail', query: { id: item.id } })">马上拼</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* 自定义之拼团样式组件
|
||||||
|
* @property {Object} detail - 秒杀商品信息
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
timestamp: 0, //倒计时
|
||||||
|
goodsList: [],
|
||||||
|
showActivity: true, //是否显示活动。
|
||||||
|
grouponType: this.detail.style
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
detail: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {},
|
||||||
|
computed: {},
|
||||||
|
created() {
|
||||||
|
this.getActivityGoodsList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 路由跳转
|
||||||
|
jump(path, parmas) {
|
||||||
|
this.$Router.push({
|
||||||
|
path: path,
|
||||||
|
query: parmas
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取拼团商品
|
||||||
|
getActivityGoodsList() {
|
||||||
|
let that = this;
|
||||||
|
that.$http('goods.activity', {
|
||||||
|
activity_id: that.detail.id,
|
||||||
|
need_buyer: 1
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code === 1) {
|
||||||
|
that.goodsList = res.data.goods.data;
|
||||||
|
that.showActivity = that.goodsList.length;
|
||||||
|
} else {
|
||||||
|
that.showActivity = false;
|
||||||
|
console.log(`%cerr:拼团活动已结束`, 'color:green;background:yellow');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.groupon-card {
|
||||||
|
background: linear-gradient(#faecca 20%, #ffffff 30%, #ffffff 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.groupon-title {
|
||||||
|
background: url($IMG_URL+'/imgs/tag/groupon_title_bg.png') no-repeat;
|
||||||
|
background-position: center top;
|
||||||
|
background-size: 100% auto;
|
||||||
|
}
|
||||||
|
.activity-wrap {
|
||||||
|
background-color: #fff;
|
||||||
|
min-height: 300rpx;
|
||||||
|
.title-box {
|
||||||
|
.title-text {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.more-box {
|
||||||
|
.more-text {
|
||||||
|
font-size: 22rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.more-icon {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-box,
|
||||||
|
.goods-box {
|
||||||
|
height: 380rpx;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 小商品卡片
|
||||||
|
.min-goods {
|
||||||
|
width: 220rpx;
|
||||||
|
height: 380rpx;
|
||||||
|
background: #fffaef;
|
||||||
|
box-shadow: 0px 7rpx 8rpx 1rpx rgba(162, 117, 27, 0.24);
|
||||||
|
border-radius: 10rpx;
|
||||||
|
.img-box {
|
||||||
|
width: 220rpx;
|
||||||
|
height: 220rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 10rpx 10rpx 0 0;
|
||||||
|
.img {
|
||||||
|
width: 220rpx;
|
||||||
|
height: 220rpx;
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mgoods-card-bottom {
|
||||||
|
height: 160rpx;
|
||||||
|
background: url($IMG_URL+'/imgs/tag/groupon_goods_bg.png') no-repeat;
|
||||||
|
background-position: bottom center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.goods-title {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #000000;
|
||||||
|
width: 180rpx;
|
||||||
|
line-height: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #ff0000;
|
||||||
|
&::before {
|
||||||
|
content: '￥';
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.original-price {
|
||||||
|
font-size: 20rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
text-decoration: line-through;
|
||||||
|
color: #c4c4c4;
|
||||||
|
}
|
||||||
|
.groupon-num-box {
|
||||||
|
.avatar-box {
|
||||||
|
direction: rtl;
|
||||||
|
unicode-bidi: bidi-override;
|
||||||
|
height: 30rpx;
|
||||||
|
.avatar-img {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.groupon-num-text {
|
||||||
|
font-size: 18rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #e9b461;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 大商品卡片
|
||||||
|
.big-goods {
|
||||||
|
width: 710rpx;
|
||||||
|
min-height: 260rpx;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0px 7rpx 8rpx 1rpx #fffaef;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
.goods-img {
|
||||||
|
width: 220rpx;
|
||||||
|
height: 220rpx;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
}
|
||||||
|
.card-right {
|
||||||
|
width: 430rpx;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.goods-title {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
width: 400rpx;
|
||||||
|
color: #000000;
|
||||||
|
vertical-align: middle;
|
||||||
|
.title-tag {
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.subtitle-text {
|
||||||
|
font-size: 22rpx;
|
||||||
|
width: 400rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
.buy-btn {
|
||||||
|
width: 120rpx;
|
||||||
|
line-height: 50rpx;
|
||||||
|
background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
|
||||||
|
border-radius: 25rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
// 拼团
|
||||||
|
.sell-box {
|
||||||
|
background: rgba(#f9efd6, 0.3);
|
||||||
|
border-radius: 16rpx;
|
||||||
|
line-height: 32rpx;
|
||||||
|
.sell-num {
|
||||||
|
font-size: 20rpx;
|
||||||
|
|
||||||
|
font-weight: 400;
|
||||||
|
color: #ff6904;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hot-icon {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #ff6904;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.group-num {
|
||||||
|
font-size: 20rpx;
|
||||||
|
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(153, 153, 153, 1);
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
// 价格
|
||||||
|
.price {
|
||||||
|
color: #ff0000;
|
||||||
|
font-weight: 600;
|
||||||
|
&::before {
|
||||||
|
content: '￥';
|
||||||
|
font-size: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.origin-price {
|
||||||
|
color: #c4c4c4;
|
||||||
|
font-size: 24rpx;
|
||||||
|
text-decoration: line-through;
|
||||||
|
&::before {
|
||||||
|
content: '￥';
|
||||||
|
font-size: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,108 @@
|
|||||||
|
<template>
|
||||||
|
<view class="live-el u-m-p-20 u-m-b-10" v-if="showLive">
|
||||||
|
<view class="head">
|
||||||
|
<text class="head-title">{{ detail.name }}</text>
|
||||||
|
<view class="head-more u-flex u-col-center" @tap="$Router.push('/pages/app/live/list')">
|
||||||
|
<text class="u-m-r-10 more-text">更多直播</text>
|
||||||
|
<text class="iconfont icon-youjiantou-tianchong more-icon"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 大图 -->
|
||||||
|
<view v-if="liveType == 1" v-for="live in liveList" :key="live.id"><shopro-live-card :type="1" :detail="live"></shopro-live-card></view>
|
||||||
|
|
||||||
|
<!-- 小图 -->
|
||||||
|
<view class="content-two" v-if="liveType == 2">
|
||||||
|
<view class="content-two__item" v-for="live in liveList" :key="live.id">
|
||||||
|
<shopro-live-card :type="2" :detail="live" :wh="345">
|
||||||
|
<block slot="liveGoods"><text></text></block>
|
||||||
|
</shopro-live-card>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* 自定义之直播卡片
|
||||||
|
* @property {Object} detail - 直播信息
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
liveList: [],
|
||||||
|
showLive: this.detail.ids,
|
||||||
|
liveType: this.detail.style
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
detail: {}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.showLive && this.getLiveList();
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {
|
||||||
|
// 直播列表
|
||||||
|
getLiveList() {
|
||||||
|
let that = this;
|
||||||
|
that.$http('common.live', {
|
||||||
|
type: 'all',
|
||||||
|
ids: that.detail.ids
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code === 1) {
|
||||||
|
that.liveList = res.data;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
goRoom(live) {
|
||||||
|
wx.navigateTo({
|
||||||
|
url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${live.room_id}`
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.live-el {
|
||||||
|
background: #fff;
|
||||||
|
padding: 30rpx 20rpx;
|
||||||
|
.head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
&-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: rgba(51, 51, 51, 1);
|
||||||
|
}
|
||||||
|
&-more {
|
||||||
|
.more-text {
|
||||||
|
font-size: 22rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.more-icon {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 双图直播
|
||||||
|
.content-two {
|
||||||
|
width: 710rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
&__item {
|
||||||
|
margin-right: 20rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
width: 345rpx;
|
||||||
|
&:nth-child(2n) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,150 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 订单卡片 -->
|
||||||
|
<view class="sh-order-box u-flex u-m-b-10 u-p-r-20">
|
||||||
|
<view class="order-box u-flex">
|
||||||
|
<view class="order-item u-flex-col " @tap="jump('/pages/order/list', { type: order.type })" v-for="order in orderNav" :key="order.id">
|
||||||
|
<view class="u-flex-col item-box u-col-center">
|
||||||
|
<image class="order-img" :src="$IMG_URL + order.img" mode=""></image>
|
||||||
|
<text class="item-title">{{ order.title }}</text>
|
||||||
|
<view class="badge" v-if="orderNum && orderNum[order.type]">{{ orderNum[order.type] }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="order-item u-flex-col " @tap="jump('/pages/order/after-sale/list')">
|
||||||
|
<view class="u-flex-col item-box u-col-center">
|
||||||
|
<image class="order-img" :src="$IMG_URL + '/imgs/user/tab55.png'" mode=""></image>
|
||||||
|
<text class="item-title">退换货</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="order-item u-flex-col all-order " @tap="jump('/pages/order/list', { type: 'all' })">
|
||||||
|
<image class="cut-off--line" :src="$IMG_URL + '/imgs/user/cut_off_line.png'" mode=""></image>
|
||||||
|
<view class="u-flex-col item-box u-col-center">
|
||||||
|
<image class="order-img" :src="$IMG_URL + '/imgs/user/all_order.png'" mode="aspectFill"></image>
|
||||||
|
<text class="item-title">全部订单</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* 订单中心卡片
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
orderNav: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: '待付款',
|
||||||
|
img: '/imgs/user/tab11.png',
|
||||||
|
type: 'nopay'
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// id: 2,
|
||||||
|
// title: '待发货',
|
||||||
|
// img: this.$IMG_URL + '/imgs/user/tab22.png',
|
||||||
|
// type: 'nosend'
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: '待收货',
|
||||||
|
img: '/imgs/user/tab33.png',
|
||||||
|
type: 'noget'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: '待评价',
|
||||||
|
img: '/imgs/user/tab44.png',
|
||||||
|
type: 'nocomment'
|
||||||
|
}
|
||||||
|
// {
|
||||||
|
// id: 5,
|
||||||
|
// title: '退换货',
|
||||||
|
// img: this.$IMG_URL + '/imgs/user/tab55.png',
|
||||||
|
// type: 'aftersale'
|
||||||
|
// }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters(['isLogin', 'userOtherData']),
|
||||||
|
orderNum() {
|
||||||
|
return this.userOtherData.order_num || 0;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
jump(path, query) {
|
||||||
|
this.$Router.push({
|
||||||
|
path: path,
|
||||||
|
query: query
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.badge {
|
||||||
|
position: absolute;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: inline-flex;
|
||||||
|
/* #endif */
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
line-height: 24rpx;
|
||||||
|
padding: 4rpx 10rpx;
|
||||||
|
border-radius: 100rpx;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 24rpx;
|
||||||
|
z-index: 9;
|
||||||
|
background-color: $u-type-error;
|
||||||
|
transform: scale(0.8);
|
||||||
|
transform-origin: center center;
|
||||||
|
left: 100rpx;
|
||||||
|
top: -6rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
// 订单卡片
|
||||||
|
.sh-order-box {
|
||||||
|
height: 180rpx;
|
||||||
|
background: #fff;
|
||||||
|
.order-box {
|
||||||
|
flex: 4;
|
||||||
|
}
|
||||||
|
.all-order {
|
||||||
|
position: relative;
|
||||||
|
.cut-off--line {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
right: (750rpx/5) - 15rpx;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 136rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-item {
|
||||||
|
flex: 1;
|
||||||
|
.item-box {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.order-img {
|
||||||
|
width: 46rpx;
|
||||||
|
height: 46rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-title {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(153, 153, 153, 1);
|
||||||
|
line-height: 24rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
<template>
|
||||||
|
<view class="sh-richtext-box u-m-b-10" v-if="richText.content"><u-parse :html="richText.content"></u-parse></view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* 自定义之富文本卡片
|
||||||
|
* @property {Number|String} id - 富文本id
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
richText: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
props: {
|
||||||
|
richId: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.richId && this.getRichText();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getRichText() {
|
||||||
|
this.$http('common.richText', {
|
||||||
|
id: this.richId
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code === 1) {
|
||||||
|
this.richText = res.data;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.sh-richtext-box {
|
||||||
|
background: #fff;
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
<template>
|
||||||
|
<view class="search u-flex u-row-center u-col-center u-m-b-10 u-p-x-20" @tap="$Router.push('/pages/public/search')">
|
||||||
|
<view class="search-content u-flex u-col-center">
|
||||||
|
<text class="u-iconfont uicon-search search-icon"></text>
|
||||||
|
<view class="pl-text">搜索</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* 自定义之搜索样式卡片
|
||||||
|
* @property {Object} detail - 搜索信息
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.search {
|
||||||
|
height: 100rpx;
|
||||||
|
width: 750rpx;
|
||||||
|
background: #fff;
|
||||||
|
.search-content {
|
||||||
|
width: 710rpx;
|
||||||
|
padding: 0 18rpx;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
border-radius: 100rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
.search-icon {
|
||||||
|
color: #606266;
|
||||||
|
size: 34rpx;
|
||||||
|
}
|
||||||
|
.pl-text {
|
||||||
|
color: $u-tips-color;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,300 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 活动商品 -->
|
||||||
|
<view class="activity-wrap u-p-x-20 u-p-b-20 u-m-b-10 seckill-card" v-if="showActivity">
|
||||||
|
<!-- 标题栏 -->
|
||||||
|
<view class="title-box u-flex u-row-between u-p-y-20 seckill-title">
|
||||||
|
<view class="u-flex u-col-center">
|
||||||
|
<view class="title-text u-m-r-20 u-ellipsis-1">{{ detail.name }}</view>
|
||||||
|
<u-count-down
|
||||||
|
class="count-down-demo"
|
||||||
|
:timestamp="timestamp"
|
||||||
|
separator-color="#ffbbbb "
|
||||||
|
bg-color="#ffbbbb "
|
||||||
|
ref="uCountDown"
|
||||||
|
color="#fff"
|
||||||
|
@end="seckillEnd"
|
||||||
|
autoplay
|
||||||
|
></u-count-down>
|
||||||
|
</view>
|
||||||
|
<view class="more-box u-flex" @tap="$Router.push('/pages/activity/seckill/list')">
|
||||||
|
<text class="more-text u-m-r-10">更多抢购</text>
|
||||||
|
<text class="iconfont icon-youjiantou-tianchong more-icon"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 活动商品 -->
|
||||||
|
<!-- m -->
|
||||||
|
<scroll-view v-if="seckillType === 1" class="scroll-box" scroll-x scroll-anchoring>
|
||||||
|
<view class="goods-box u-flex">
|
||||||
|
<view class="min-goods u-m-r-14" v-for="mgoods in goodsList" :key="mgoods.id" @tap="jump('/pages/goods/detail', { id: mgoods.id })">
|
||||||
|
<view class="img-box"><image class="img" :src="mgoods.image" mode=""></image></view>
|
||||||
|
<view class="mgoods-card-bottom u-p-20">
|
||||||
|
<view class="goods-title u-m-b-10 u-ellipsis-1">{{ mgoods.title }}</view>
|
||||||
|
<view class="price-box font-OPPOSANS">
|
||||||
|
<view class="price u-m-b-10">{{ mgoods.price }}</view>
|
||||||
|
<view class="original-price">￥{{ mgoods.original_price }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<!--b-->
|
||||||
|
<view
|
||||||
|
v-if="seckillType === 2"
|
||||||
|
class="big-goods u-flex u-p-20 u-col-top u-m-b-16"
|
||||||
|
v-for="item in goodsList"
|
||||||
|
:key="item.id"
|
||||||
|
@tap="jump('/pages/goods/detail', { id: item.id })"
|
||||||
|
>
|
||||||
|
<image class="goods-img" :src="item.image" mode="aspectFill"></u-image>
|
||||||
|
<view class=" card-right u-m-l-20 u-flex-col u-row-between">
|
||||||
|
<view class="">
|
||||||
|
<view class="goods-title u-ellipsis-1 u-m-t-10 u-m-b-10">
|
||||||
|
<view class=" sm cu-tag bg-red radius title-tag u-m-r-10" >秒杀</view>
|
||||||
|
{{ item.title }}
|
||||||
|
</view>
|
||||||
|
<view v-show="item.subtitle" class="subtitle-text u-m-b-10 u-ellipsis-1">{{ item.subtitle }}</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="u-flex u-m-y-20">
|
||||||
|
<u-line-progress
|
||||||
|
style="width:210rpx;"
|
||||||
|
height="18"
|
||||||
|
:show-percent="false"
|
||||||
|
:percent="Number(item.percent)"
|
||||||
|
inactive-color=" #e7e7e7"
|
||||||
|
active-color="#ffbbbb "
|
||||||
|
></u-line-progress>
|
||||||
|
|
||||||
|
<view class="progress-text">已售出{{ item.sales }}件</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class=" u-flex u-row-between u-col-center">
|
||||||
|
<view class="u-flex u-col-bottom">
|
||||||
|
<view class="price u-m-r-10">{{ item.price }}</view>
|
||||||
|
<view class="origin-price">{{ item.original_price }}</view>
|
||||||
|
</view>
|
||||||
|
<button class="u-reset-button buy-btn">去抢购</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* 自定义之秒杀样式组件
|
||||||
|
* @property {Object} detail - 秒杀商品信息
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
timestamp: 0, //倒计时
|
||||||
|
goodsList: [],
|
||||||
|
showActivity: true, //是否显示活动。
|
||||||
|
seckillType: this.detail.style
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
detail: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {},
|
||||||
|
computed: {},
|
||||||
|
created() {
|
||||||
|
this.getActivityGoodsList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 路由跳转
|
||||||
|
jump(path, parmas) {
|
||||||
|
this.$Router.push({
|
||||||
|
path: path,
|
||||||
|
query: parmas
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 秒杀计时结束
|
||||||
|
seckillEnd() {
|
||||||
|
this.showActivity = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取秒杀商品
|
||||||
|
getActivityGoodsList() {
|
||||||
|
let that = this;
|
||||||
|
that.$http('goods.activity', {
|
||||||
|
activity_id: that.detail.id
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code === 1) {
|
||||||
|
that.goodsList = res.data.goods.data;
|
||||||
|
that.goodsList.map(item => {
|
||||||
|
item.percent = item.stock + item.sales > 0 ? ((item.sales / (item.sales + item.stock)) * 100).toFixed(2) : 0;
|
||||||
|
});
|
||||||
|
let nowTime = new Date().getTime();
|
||||||
|
let endTime = res.data.endtime * 1000;
|
||||||
|
that.timestamp = (endTime - nowTime) / 1000;
|
||||||
|
that.timestamp > 0 ? that.$refs.uCountDown.start() : (that.showActivity = false);
|
||||||
|
} else {
|
||||||
|
that.showActivity = false;
|
||||||
|
console.log(`%cerr:秒杀活动已结束`, 'color:green;background:yellow');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.seckill-card {
|
||||||
|
background: linear-gradient(#ffebec 20%, #fff 30%, #fff 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.seckill-title {
|
||||||
|
background: url($IMG_URL+'/imgs/tag/seckill_title_bg.png') no-repeat;
|
||||||
|
background-position: center top;
|
||||||
|
background-size: 100% auto;
|
||||||
|
}
|
||||||
|
.activity-wrap {
|
||||||
|
background-color: #fff;
|
||||||
|
min-height: 300rpx;
|
||||||
|
.title-box {
|
||||||
|
.title-text {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.more-box {
|
||||||
|
.more-text {
|
||||||
|
font-size: 22rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.more-icon {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-box,
|
||||||
|
.goods-box {
|
||||||
|
height: 380rpx;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 小商品卡片
|
||||||
|
.min-goods {
|
||||||
|
width: 220rpx;
|
||||||
|
height: 380rpx;
|
||||||
|
background: #fff7f7;
|
||||||
|
box-shadow: 0px 7rpx 7rpx 0px rgba(255, 80, 94, 0.32);
|
||||||
|
border-radius: 10rpx;
|
||||||
|
.img-box {
|
||||||
|
width: 220rpx;
|
||||||
|
height: 220rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 10rpx 10rpx 0 0;
|
||||||
|
.img {
|
||||||
|
width: 220rpx;
|
||||||
|
height: 220rpx;
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mgoods-card-bottom {
|
||||||
|
height: 160rpx;
|
||||||
|
background: url($IMG_URL+'/imgs/tag/seckill_goods_bg.png') no-repeat;
|
||||||
|
background-position: bottom center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.goods-title {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #000000;
|
||||||
|
line-height: 26rpx;
|
||||||
|
}
|
||||||
|
.price-box {
|
||||||
|
.price {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #ff0000;
|
||||||
|
&::before {
|
||||||
|
content: '￥';
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.original-price {
|
||||||
|
font-size: 20rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
text-decoration: line-through;
|
||||||
|
color: #c4c4c4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 大商品卡片
|
||||||
|
.big-goods {
|
||||||
|
width: 710rpx;
|
||||||
|
min-height: 260rpx;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0px 7rpx 8rpx 1rpx rgba(254, 76, 29, 0.05);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
.goods-img{
|
||||||
|
width: 220rpx;
|
||||||
|
height: 220rpx;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
}
|
||||||
|
.card-right {
|
||||||
|
width: 430rpx;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.goods-title {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
width: 400rpx;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
.subtitle-text {
|
||||||
|
font-size: 22rpx;
|
||||||
|
width: 400rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
.buy-btn {
|
||||||
|
width: 120rpx;
|
||||||
|
line-height: 50rpx;
|
||||||
|
background: linear-gradient(90deg, #d01325, #ed3c30);
|
||||||
|
border-radius: 25rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.progress-text {
|
||||||
|
color: #c4c4c4;
|
||||||
|
font-size: 20rpx;
|
||||||
|
margin-left: 25rpx;
|
||||||
|
}
|
||||||
|
// 价格
|
||||||
|
.price {
|
||||||
|
color: #ff0000;
|
||||||
|
font-weight: 600;
|
||||||
|
&::before {
|
||||||
|
content: '￥';
|
||||||
|
font-size: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.origin-price {
|
||||||
|
color: #c4c4c4;
|
||||||
|
font-size: 24rpx;
|
||||||
|
text-decoration: line-through;
|
||||||
|
&::before {
|
||||||
|
content: '￥';
|
||||||
|
font-size: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
<template>
|
||||||
|
<view class="sh-title-card u-m-b-10">
|
||||||
|
<view class="title-box">
|
||||||
|
<image class="title-bg" :src="bgImage" mode="aspectFill"></image>
|
||||||
|
<view class="title-text" :style="{ color: titleColor }">{{ title }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* shTitleCard 组件标题栏
|
||||||
|
* @property {String} bgImage - 背景图
|
||||||
|
* @property {String} title - 标题
|
||||||
|
* @property {String} titleColor - 标题颜色
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
props: {
|
||||||
|
bgImage: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
titleColor: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.sh-title-card {
|
||||||
|
width: 750rpx;
|
||||||
|
}
|
||||||
|
.title-box {
|
||||||
|
width: 710rpx;
|
||||||
|
height: 88rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
|
||||||
|
.title-bg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.title-text {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,106 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 钱包卡片 -->
|
||||||
|
<view class="sh-wallet-box u-flex u-m-b-10 u-p-r-20">
|
||||||
|
<view class="u-flex wallet-left">
|
||||||
|
<view class="wallet-item u-flex-col u-col-center" @tap="jump('/pages/user/wallet/index')">
|
||||||
|
<text class="wallet-item__detail item-balance u-ellipsis-1">{{ userInfo.money || '0' }}</text>
|
||||||
|
<text class="wallet-item__title">账户余额</text>
|
||||||
|
</view>
|
||||||
|
<view class="wallet-item u-flex-col u-col-center" @tap="jump('/pages/user/wallet/score-balance')">
|
||||||
|
<text class="wallet-item__detail item-score u-ellipsis-1">{{ userInfo.score || '0' }}</text>
|
||||||
|
<text class="wallet-item__title">积分</text>
|
||||||
|
</view>
|
||||||
|
<view class="wallet-item u-flex-col u-col-center" @tap="jump('/pages/app/coupon/list')">
|
||||||
|
<text class="wallet-item__detail item-coupon u-ellipsis-1">{{ userOtherData.coupons_num || '0' }}</text>
|
||||||
|
<text class="wallet-item__title">优惠券</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="wallet-item u-flex-col wallet-right u-col-center" @tap="jump('/pages/user/wallet/index')">
|
||||||
|
<image class="cut-off--line" :src="$IMG_URL + '/imgs/user/cut_off_line.png'" mode=""></image>
|
||||||
|
<image class="wallet-img" :src="$IMG_URL + '/imgs/user/wallet.png'" mode="aspectFill"></image>
|
||||||
|
<text class="wallet-item__title">我的钱包</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* 钱包样式卡片
|
||||||
|
*/
|
||||||
|
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters(['userInfo', 'userOtherData'])
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
jump(path, query) {
|
||||||
|
this.$Router.push({
|
||||||
|
path: path,
|
||||||
|
query: query
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
// 钱包卡片
|
||||||
|
.sh-wallet-box {
|
||||||
|
background: #fff;
|
||||||
|
height: 180rpx;
|
||||||
|
position: relative;
|
||||||
|
.wallet-left {
|
||||||
|
flex: 4;
|
||||||
|
}
|
||||||
|
.wallet-right {
|
||||||
|
position: relative;
|
||||||
|
.cut-off--line {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
right: (750rpx/5) - 15rpx;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 136rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.wallet-item {
|
||||||
|
flex: 1;
|
||||||
|
.wallet-img {
|
||||||
|
width: 46rpx;
|
||||||
|
height: 46rpx;
|
||||||
|
}
|
||||||
|
.wallet-item__detail {
|
||||||
|
font-size: 28rpx;
|
||||||
|
width: 180rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(168, 112, 13, 1);
|
||||||
|
}
|
||||||
|
.wallet-item__title {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
color: rgba(153, 153, 153, 1);
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
.item-balance::after {
|
||||||
|
content: '元';
|
||||||
|
font-size: 16rpx;
|
||||||
|
margin-left: 4rpx;
|
||||||
|
}
|
||||||
|
.item-score::after {
|
||||||
|
content: '个';
|
||||||
|
font-size: 14rpx;
|
||||||
|
margin-left: 4rpx;
|
||||||
|
}
|
||||||
|
.item-coupon::after {
|
||||||
|
content: '张';
|
||||||
|
font-size: 16rpx;
|
||||||
|
margin-left: 4rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,215 @@
|
|||||||
|
<!-- 首页 -->
|
||||||
|
<template>
|
||||||
|
<view class="home-wrap u-m-b-20">
|
||||||
|
<!-- 空白页 -->
|
||||||
|
<!-- #ifdef APP-PLUS -->
|
||||||
|
<u-no-network @retry="init"></u-no-network>
|
||||||
|
<!-- #endif -->
|
||||||
|
<shopro-empty
|
||||||
|
v-if="!hasTemplate"
|
||||||
|
:image="$IMG_URL + '/imgs/empty/template_empty.png'"
|
||||||
|
tipText="暂未找到模板，请前往装修~"
|
||||||
|
></shopro-empty>
|
||||||
|
|
||||||
|
<view v-else-if="isConnected && isRefresh" class="content-box">
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<home-head
|
||||||
|
v-if="headSwiperList && headSwiperList.length"
|
||||||
|
:scrollTop="scrollTop"
|
||||||
|
borderRadius="0"
|
||||||
|
:navTitle="initShop.name"
|
||||||
|
:list="headSwiperList"
|
||||||
|
></home-head>
|
||||||
|
<!-- 自定义模块 -->
|
||||||
|
<view class="template-box">
|
||||||
|
<block v-for="(item, index) in homeTemplate" :key="item.id">
|
||||||
|
<!-- 轮播 -->
|
||||||
|
<sh-banner
|
||||||
|
v-if="item.type === 'banner' && index !== 0"
|
||||||
|
:Px="item.content.x"
|
||||||
|
:Py="item.content.y"
|
||||||
|
:borderRadius="item.content.radius"
|
||||||
|
:height="item.content.height"
|
||||||
|
:list="item.content.list"
|
||||||
|
></sh-banner>
|
||||||
|
|
||||||
|
<!-- 搜索 -->
|
||||||
|
<sh-search v-if="item.type === 'search'"></sh-search>
|
||||||
|
|
||||||
|
<!-- 滑动宫格 -->
|
||||||
|
<sh-grid-swiper
|
||||||
|
v-if="item.type === 'menu'"
|
||||||
|
:list="item.content.list"
|
||||||
|
:oneRowNum="item.content.style"
|
||||||
|
></sh-grid-swiper>
|
||||||
|
|
||||||
|
<!-- 推荐商品 -->
|
||||||
|
<sh-hot-goods
|
||||||
|
v-if="item.type === 'goods-list' || item.type === 'goods-group'"
|
||||||
|
:detail="item.content"
|
||||||
|
></sh-hot-goods>
|
||||||
|
<!-- 广告魔方 -->
|
||||||
|
<sh-adv v-if="item.type === 'adv'" :detail="item.content"></sh-adv>
|
||||||
|
<!-- 优惠券 -->
|
||||||
|
<sh-coupon v-if="item.type === 'coupons'" :detail="item.content"></sh-coupon>
|
||||||
|
<!-- 秒杀-->
|
||||||
|
<sh-seckill v-if="item.type === 'seckill'" :detail="item.content"></sh-seckill>
|
||||||
|
<!-- 拼团 -->
|
||||||
|
<sh-groupon v-if="item.type === 'groupon'" :detail="item.content"></sh-groupon>
|
||||||
|
<!-- 富文本 -->
|
||||||
|
<sh-richtext v-if="item.type === 'rich-text'" :richId="item.content.id"></sh-richtext>
|
||||||
|
<!-- 功能标题 -->
|
||||||
|
<sh-title-card
|
||||||
|
v-if="item.type === 'title-block'"
|
||||||
|
:title="item.content.name"
|
||||||
|
:bgImage="item.content.image"
|
||||||
|
:titleColor="item.content.color"
|
||||||
|
></sh-title-card>
|
||||||
|
<!-- 直播 -->
|
||||||
|
<!-- #ifdef MP-WEIXIN -->
|
||||||
|
<sh-live v-if="item.type === 'live' && HAS_LIVE" :detail="item.content"></sh-live>
|
||||||
|
<!-- #endif -->
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 分类选项卡 -->
|
||||||
|
<sh-category-tabs
|
||||||
|
v-if="categoryTabsData && categoryTabsData.category_arr && categoryTabsData.category_arr.length"
|
||||||
|
:enable="enable"
|
||||||
|
:styleType="categoryTabsData.style"
|
||||||
|
:tabsList="categoryTabsData.category_arr"
|
||||||
|
></sh-category-tabs>
|
||||||
|
<!-- 登录提示 -->
|
||||||
|
<shopro-auth-modal></shopro-auth-modal>
|
||||||
|
<!-- 悬浮按钮 -->
|
||||||
|
<shopro-float-btn></shopro-float-btn>
|
||||||
|
<!-- 连续弹窗提醒 -->
|
||||||
|
<shopro-notice-modal v-if="!showPrivacy && isLogin"></shopro-notice-modal>
|
||||||
|
<!-- 隐私协议 -->
|
||||||
|
<!-- #ifdef APP-PLUS -->
|
||||||
|
<privacy-modal v-if="initShop && initShop.name" v-model="showPrivacy"></privacy-modal>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef H5 -->
|
||||||
|
<view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>
|
||||||
|
<!-- #endif -->
|
||||||
|
</view>
|
||||||
|
<!-- <shopro-tabbar></shopro-tabbar> -->
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import shBanner from './components/sh-banner.vue';
|
||||||
|
import shGridSwiper from './components/sh-grid-swiper.vue';
|
||||||
|
import shHotGoods from './components/sh-hot-goods.vue';
|
||||||
|
import shAdv from './components/sh-adv.vue';
|
||||||
|
import shCoupon from './components/sh-coupon.vue';
|
||||||
|
import shSeckill from './components/sh-seckill.vue';
|
||||||
|
import shGroupon from './components/sh-groupon.vue';
|
||||||
|
import shRichtext from './components/sh-richtext.vue';
|
||||||
|
import shTitleCard from './components/sh-title-card.vue';
|
||||||
|
import shSearch from './components/sh-search.vue';
|
||||||
|
import shCategoryTabs from './components/sh-category-tabs.vue';
|
||||||
|
|
||||||
|
import privacyModal from './index/privacy-modal.vue';
|
||||||
|
import homeHead from './index/home-head.vue';
|
||||||
|
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
import { HAS_LIVE } from '@/env';
|
||||||
|
import shLive from './components/sh-live.vue';
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
shBanner,
|
||||||
|
shGridSwiper,
|
||||||
|
shGroupon,
|
||||||
|
shHotGoods,
|
||||||
|
shAdv,
|
||||||
|
shCoupon,
|
||||||
|
shSeckill,
|
||||||
|
shRichtext,
|
||||||
|
shTitleCard,
|
||||||
|
shSearch,
|
||||||
|
shCategoryTabs,
|
||||||
|
|
||||||
|
privacyModal,
|
||||||
|
homeHead,
|
||||||
|
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
shLive
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
HAS_LIVE: HAS_LIVE,
|
||||||
|
// #endif
|
||||||
|
isRefresh: true,
|
||||||
|
|
||||||
|
enable: false, //是否开启吸顶。
|
||||||
|
isConnected: true, //是否有网
|
||||||
|
showPrivacy: false, //协议
|
||||||
|
scrollTop: 0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters(['initShop', 'homeTemplate', 'hasTemplate', 'isLogin']),
|
||||||
|
// 头部模块数据
|
||||||
|
headSwiperList() {
|
||||||
|
if (this.homeTemplate?.length) {
|
||||||
|
return this.homeTemplate[0]?.content?.list;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 分类选项卡数据
|
||||||
|
categoryTabsData() {
|
||||||
|
if (this.homeTemplate?.length) {
|
||||||
|
return this.homeTemplate[this.homeTemplate.length - 1]?.content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onPullDownRefresh() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
onPageScroll(e) {
|
||||||
|
this.scrollTop = e.scrollTop;
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
let that = this;
|
||||||
|
this.enable = true;
|
||||||
|
this.isLogin && this.getCartList();
|
||||||
|
// 网络变化检测
|
||||||
|
uni.onNetworkStatusChange(res => {
|
||||||
|
this.isConnected = res.isConnected;
|
||||||
|
res.isConnected && this.init();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onHide() {
|
||||||
|
this.enable = false;
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
// #ifdef APP-VUE
|
||||||
|
// plus.runtime.disagreePrivacy();
|
||||||
|
console.log(plus.runtime.isAgreePrivacy(), 1111111111);
|
||||||
|
// app隐私协议弹窗
|
||||||
|
if (!plus.runtime.isAgreePrivacy()) {
|
||||||
|
this.showPrivacy = true;
|
||||||
|
this.showNoticeModal = false;
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions(['appInit', 'getTemplate', 'getCartList']),
|
||||||
|
// 初始化
|
||||||
|
init() {
|
||||||
|
this.isRefresh = false;
|
||||||
|
return Promise.all([this.getTemplate()]).then(() => {
|
||||||
|
uni.stopPullDownRefresh();
|
||||||
|
this.isRefresh = true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss"></style>
|
||||||
@ -0,0 +1,143 @@
|
|||||||
|
<!-- 个人中心 -->
|
||||||
|
<template>
|
||||||
|
<view class="personal-wrap">
|
||||||
|
<!-- 个人信息卡片 -->
|
||||||
|
<userinfo-card v-if="userHeadData && userHeadData.style" :scrollTop="scrollTop" :detail="userHeadData" @onShare="onShare"></userinfo-card>
|
||||||
|
<!-- 自定义模块 -->
|
||||||
|
<view v-for="(item, index) in userTemplate" :key="item.id">
|
||||||
|
<!-- 轮播 -->
|
||||||
|
<sh-banner
|
||||||
|
v-if="item.type === 'banner' && index !== 0"
|
||||||
|
:Px="item.content.x"
|
||||||
|
:Py="item.content.y"
|
||||||
|
:borderRadius="item.content.radius"
|
||||||
|
:height="item.content.height"
|
||||||
|
:list="item.content.list"
|
||||||
|
></sh-banner>
|
||||||
|
<!-- 滑动宫格 -->
|
||||||
|
<sh-grid-swiper v-if="item.type === 'menu'" :list="item.content.list" :oneRowNum="item.content.style"></sh-grid-swiper>
|
||||||
|
<!-- 广告魔方 -->
|
||||||
|
<sh-adv v-if="item.type === 'adv'" :detail="item.content"></sh-adv>
|
||||||
|
<!-- 推荐商品 -->
|
||||||
|
<sh-hot-goods v-if="item.type === 'goods-list' || item.type === 'goods-group'" :detail="item.content"></sh-hot-goods>
|
||||||
|
<!-- 富文本 -->
|
||||||
|
<sh-richtext v-if="item.type === 'rich-text'" :richId="item.content.id"></sh-richtext>
|
||||||
|
<!-- 功能列表 -->
|
||||||
|
<sh-cell v-if="item.type === 'nav-list'" :list="item.content.list"></sh-cell>
|
||||||
|
<!-- 九宫格列表 -->
|
||||||
|
<sh-grid v-if="item.type === 'grid-list'" :list="item.content.list"></sh-grid>
|
||||||
|
<!-- 钱包 -->
|
||||||
|
<sh-wallet v-if="item.type === 'wallet-card'"></sh-wallet>
|
||||||
|
<!-- 订单卡片 -->
|
||||||
|
<sh-order-card v-if="item.type === 'order-card'"></sh-order-card>
|
||||||
|
</view>
|
||||||
|
<!-- copyright -->
|
||||||
|
<view class="copyright-box u-flex-col u-row-center u-col-center u-p-t-80 u-p-b-50" v-if="initShop.copyright">
|
||||||
|
<view class="copyright-text">{{ initShop.copyright[0] }}</view>
|
||||||
|
<view class="copyright-text">{{ initShop.copyright[1] }}</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- #ifdef H5 -->
|
||||||
|
<view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- 关注弹窗 -->
|
||||||
|
<shopro-float-btn></shopro-float-btn>
|
||||||
|
<!-- 登录提示 -->
|
||||||
|
<shopro-auth-modal></shopro-auth-modal>
|
||||||
|
<!-- 分享组件 -->
|
||||||
|
<shopro-share v-model="showShare" posterType="user"></shopro-share>
|
||||||
|
<!-- <shopro-tabbar></shopro-tabbar> -->
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import shBanner from './components/sh-banner.vue';
|
||||||
|
import shGridSwiper from './components/sh-grid-swiper.vue';
|
||||||
|
import shAdv from './components/sh-adv.vue';
|
||||||
|
import shRichtext from './components/sh-richtext.vue';
|
||||||
|
import shCell from './components/sh-cell.vue';
|
||||||
|
import shGrid from './components/sh-grid.vue';
|
||||||
|
import shOrderCard from './components/sh-order-card.vue';
|
||||||
|
import shWallet from './components/sh-wallet.vue';
|
||||||
|
import shHotGoods from './components/sh-hot-goods.vue';
|
||||||
|
|
||||||
|
import userinfoCard from './user/userinfo-card.vue';
|
||||||
|
|
||||||
|
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
|
||||||
|
|
||||||
|
import share from '@/shopro/share';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
shBanner,
|
||||||
|
shGridSwiper,
|
||||||
|
shAdv,
|
||||||
|
shRichtext,
|
||||||
|
shCell,
|
||||||
|
shGrid,
|
||||||
|
shWallet,
|
||||||
|
shOrderCard,
|
||||||
|
shHotGoods,
|
||||||
|
|
||||||
|
userinfoCard
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
scrollTop: 0,
|
||||||
|
showShare: false,
|
||||||
|
enable: false //是否开启吸顶。
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters(['initShop', 'userTemplate', 'isLogin', 'userInfo', 'authType']),
|
||||||
|
userHeadData() {
|
||||||
|
if (this.userTemplate?.length) {
|
||||||
|
return this.userTemplate[0].content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 下拉刷新
|
||||||
|
onPullDownRefresh() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
onPageScroll(e) {
|
||||||
|
this.scrollTop = e.scrollTop;
|
||||||
|
},
|
||||||
|
|
||||||
|
onShow() {
|
||||||
|
if (this.isLogin) {
|
||||||
|
this.init();
|
||||||
|
this.getUserData();
|
||||||
|
}
|
||||||
|
this.enable = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
...mapActions(['getUserInfo', 'showAuthModal', 'getUserData']),
|
||||||
|
onShare() {
|
||||||
|
this.showShare = true;
|
||||||
|
uni.hideTabBar();
|
||||||
|
},
|
||||||
|
// 初始化
|
||||||
|
init() {
|
||||||
|
this.getUserInfo()
|
||||||
|
.then(res => {
|
||||||
|
uni.stopPullDownRefresh();
|
||||||
|
})
|
||||||
|
.catch(e => {
|
||||||
|
uni.stopPullDownRefresh();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.copyright-box {
|
||||||
|
.copyright-text {
|
||||||
|
font-size: 22rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #c4c4c4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,182 @@
|
|||||||
|
<!-- 自定义页面 -->
|
||||||
|
<template>
|
||||||
|
<view class="home-wrap u-m-b-20">
|
||||||
|
<!-- 空白页 -->
|
||||||
|
<u-no-network @retry="init"></u-no-network>
|
||||||
|
<shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/template_empty.png'" tipText="暂未找到模板，请前往装修~"></shopro-empty>
|
||||||
|
|
||||||
|
<view v-else-if="isRefresh" class="content-box">
|
||||||
|
<!-- 自定义模块 -->
|
||||||
|
<view class="template-box">
|
||||||
|
<block v-for="(item, index) in viewTemplate" :key="item.id">
|
||||||
|
<!-- 轮播 -->
|
||||||
|
<sh-banner
|
||||||
|
v-if="item.type === 'banner'"
|
||||||
|
:Px="item.content.x"
|
||||||
|
:Py="item.content.y"
|
||||||
|
:borderRadius="item.content.radius"
|
||||||
|
:height="item.content.height"
|
||||||
|
:list="item.content.list"
|
||||||
|
></sh-banner>
|
||||||
|
|
||||||
|
<!-- 搜索 -->
|
||||||
|
<sh-search v-if="item.type === 'search'"></sh-search>
|
||||||
|
|
||||||
|
<!-- 滑动宫格 -->
|
||||||
|
<sh-grid-swiper v-if="item.type === 'menu'" :list="item.content.list" :oneRowNum="item.content.style"></sh-grid-swiper>
|
||||||
|
|
||||||
|
<!-- 推荐商品 -->
|
||||||
|
<sh-hot-goods v-if="item.type === 'goods-list' || item.type === 'goods-group'" :detail="item.content"></sh-hot-goods>
|
||||||
|
<!-- 广告魔方 -->
|
||||||
|
<sh-adv v-if="item.type === 'adv'" :detail="item.content"></sh-adv>
|
||||||
|
<!-- 优惠券 -->
|
||||||
|
<sh-coupon v-if="item.type === 'coupons'" :detail="item.content"></sh-coupon>
|
||||||
|
<!-- 秒杀-->
|
||||||
|
<sh-seckill v-if="item.type === 'seckill'" :detail="item.content"></sh-seckill>
|
||||||
|
<!-- 拼团 -->
|
||||||
|
<sh-groupon v-if="item.type === 'groupon'" :detail="item.content"></sh-groupon>
|
||||||
|
<!-- 富文本 -->
|
||||||
|
<sh-richtext v-if="item.type === 'rich-text'" :richId="item.content.id"></sh-richtext>
|
||||||
|
<!-- 功能列表 -->
|
||||||
|
<sh-cell v-if="item.type === 'nav-list'" :list="item.content.list"></sh-cell>
|
||||||
|
<!-- 九宫格列表 -->
|
||||||
|
<sh-grid v-if="item.type === 'grid-list'" :detail="item.content.list"></sh-grid>
|
||||||
|
<!-- 功能标题 -->
|
||||||
|
<sh-title-card v-if="item.type === 'title-block'" :title="item.content.name" :bgImage="item.content.image" :titleColor="item.content.color"></sh-title-card>
|
||||||
|
<!-- 钱包 -->
|
||||||
|
<sh-wallet v-if="item.type === 'wallet-card'"></sh-wallet>
|
||||||
|
<!-- 订单卡片 -->
|
||||||
|
<sh-order-card v-if="item.type === 'order-card'"></sh-order-card>
|
||||||
|
<!-- 直播 -->
|
||||||
|
<!-- #ifdef MP-WEIXIN -->
|
||||||
|
<sh-live v-if="item.type === 'live' && HAS_LIVE" :detail="item.content"></sh-live>
|
||||||
|
<!-- #endif -->
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<!-- 分类选项卡 -->
|
||||||
|
<sh-category-tabs
|
||||||
|
v-if="categoryTabsData && categoryTabsData.category_arr && categoryTabsData.category_arr.length"
|
||||||
|
:enable="enable"
|
||||||
|
:styleType="categoryTabsData.style"
|
||||||
|
:tabsList="categoryTabsData.category_arr"
|
||||||
|
></sh-category-tabs>
|
||||||
|
<!-- 登录提示 -->
|
||||||
|
<shopro-auth-modal></shopro-auth-modal>
|
||||||
|
<!-- #ifdef H5 -->
|
||||||
|
<view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>
|
||||||
|
<!-- #endif -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import shBanner from './components/sh-banner.vue';
|
||||||
|
import shGridSwiper from './components/sh-grid-swiper.vue';
|
||||||
|
import shHotGoods from './components/sh-hot-goods.vue';
|
||||||
|
import shAdv from './components/sh-adv.vue';
|
||||||
|
import shCoupon from './components/sh-coupon.vue';
|
||||||
|
import shSeckill from './components/sh-seckill.vue';
|
||||||
|
import shGroupon from './components/sh-groupon.vue';
|
||||||
|
import shRichtext from './components/sh-richtext.vue';
|
||||||
|
import shCell from './components/sh-cell.vue';
|
||||||
|
import shGrid from './components/sh-grid.vue';
|
||||||
|
import shTitleCard from './components/sh-title-card.vue';
|
||||||
|
import shOrderCard from './components/sh-order-card.vue';
|
||||||
|
import shWallet from './components/sh-wallet.vue';
|
||||||
|
import shSearch from './components/sh-search.vue';
|
||||||
|
import shCategoryTabs from './components/sh-category-tabs.vue';
|
||||||
|
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
|
||||||
|
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
import { HAS_LIVE } from '@/env';
|
||||||
|
import shLive from './components/sh-live.vue';
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef H5
|
||||||
|
let listenMove = document.body; //禁止手机h5下拉刷新带动整个页面。
|
||||||
|
let handle = function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
};
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
shBanner,
|
||||||
|
shGridSwiper,
|
||||||
|
shGroupon,
|
||||||
|
shHotGoods,
|
||||||
|
shAdv,
|
||||||
|
shCoupon,
|
||||||
|
shSeckill,
|
||||||
|
shRichtext,
|
||||||
|
shCell,
|
||||||
|
shGrid,
|
||||||
|
shTitleCard,
|
||||||
|
shWallet,
|
||||||
|
shOrderCard,
|
||||||
|
shSearch,
|
||||||
|
shCategoryTabs,
|
||||||
|
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
shLive
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
HAS_LIVE: HAS_LIVE,
|
||||||
|
// #endif
|
||||||
|
enable: false, //是否开启吸顶。
|
||||||
|
isScorll: false,
|
||||||
|
viewTemplate: [], //自定义模板数据
|
||||||
|
isEmpty: false,
|
||||||
|
isRefresh: false, //刷新
|
||||||
|
categoryTabsData: {} //分类选项卡
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters(['isLogin'])
|
||||||
|
},
|
||||||
|
onPullDownRefresh() {
|
||||||
|
this.getViewTemplate();
|
||||||
|
},
|
||||||
|
onPageScroll(e) {
|
||||||
|
this.isScorll = e.scrollTop > 100 ? true : false;
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
let that = this;
|
||||||
|
this.enable = true;
|
||||||
|
this.isLogin && this.getCartList();
|
||||||
|
},
|
||||||
|
onHide() {
|
||||||
|
this.enable = false;
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.getViewTemplate();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions(['getCartList']),
|
||||||
|
// 初始化
|
||||||
|
getViewTemplate() {
|
||||||
|
let that = this;
|
||||||
|
that.isRefresh = false;
|
||||||
|
that.$http('common.custom', {
|
||||||
|
custom_id: that.$Route.query.id
|
||||||
|
}).then(res => {
|
||||||
|
uni.stopPullDownRefresh();
|
||||||
|
that.isRefresh = true;
|
||||||
|
if (res.code == 1) {
|
||||||
|
that.viewTemplate = res.data.template;
|
||||||
|
that.isEmpty = !that.viewTemplate.length;
|
||||||
|
that.categoryTabsData = that.viewTemplate[that.viewTemplate.length - 1].content;
|
||||||
|
uni.setNavigationBarTitle({
|
||||||
|
title: res.data.name
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss"></style>
|
||||||
@ -0,0 +1,96 @@
|
|||||||
|
<!-- 售后进行 -->
|
||||||
|
<template>
|
||||||
|
<view class="log-box wrap">
|
||||||
|
<u-time-line>
|
||||||
|
<u-time-line-item v-for="(log, index) in aftersaleLog" :key="log.id" nodeTop="4">
|
||||||
|
<template v-slot:node>
|
||||||
|
<view class="u-node" :style="index === 0 ? 'background: #19be6b;' : ''"><text class="u-iconfont uicon-bell-fill" style="color: #fff;font-size: 26rpx;"></text></view>
|
||||||
|
</template>
|
||||||
|
<template v-slot:content>
|
||||||
|
<view class="u-order-title unacive u-m-b-20">{{ log.reason }}</view>
|
||||||
|
<view class="u-order-desc u-m-b-10" v-show="log.content"><u-parse :html="log.content"></u-parse></view>
|
||||||
|
<view class="item-img-box u-flex u-flex-wrap" v-show="log.images.length">
|
||||||
|
<block v-for="(img, index) in log.images" :key="index"><image :src="img" class="log-img" mode="aspectFill"></image></block>
|
||||||
|
</view>
|
||||||
|
<view class="u-order-time">{{ $u.timeFormat(log.createtime, 'yyyy-mm-dd hh:MM') }}</view>
|
||||||
|
</template>
|
||||||
|
</u-time-line-item>
|
||||||
|
</u-time-line>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
aftersaleLog: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
onLoad() {
|
||||||
|
this.getAftersaleDetail();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 服务单详情
|
||||||
|
getAftersaleDetail() {
|
||||||
|
let that = this;
|
||||||
|
that.$http('order.aftersaleDetail', {
|
||||||
|
id: that.$Route.query.aftersaleId
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code === 1) {
|
||||||
|
that.aftersaleLog = res.data.logs;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.wrap {
|
||||||
|
padding: 24rpx 24rpx 24rpx 40rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-node {
|
||||||
|
width: 44rpx;
|
||||||
|
height: 44rpx;
|
||||||
|
border-radius: 100rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: #d0d0d0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-order-title {
|
||||||
|
color: #333333;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-order-title.unacive {
|
||||||
|
color: rgb(150, 150, 150);
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-order-desc {
|
||||||
|
color: rgb(150, 150, 150);
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-bottom: 6rpx;
|
||||||
|
}
|
||||||
|
.item-img-box {
|
||||||
|
.log-img {
|
||||||
|
display: block;
|
||||||
|
width: 140rpx;
|
||||||
|
height: 140rpx;
|
||||||
|
background-color: #ccc;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.u-order-time {
|
||||||
|
color: rgb(200, 200, 200);
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,432 @@
|
|||||||
|
<!-- 申请售后 -->
|
||||||
|
<template>
|
||||||
|
<view class="refund-wrap">
|
||||||
|
<!-- 售后商品 -->
|
||||||
|
<view class="goods-box">
|
||||||
|
<shopro-mini-card :title="orderItemDetail.goods_title" :image="orderItemDetail.goods_image">
|
||||||
|
<template #describe>
|
||||||
|
<view class="order-sku u-ellipsis-1">
|
||||||
|
<text class="order-num">数量:{{ orderItemDetail.goods_num || 0 }};</text>
|
||||||
|
{{ orderItemDetail.goods_sku_text ? orderItemDetail.goods_sku_text : '' }}
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<template #cardBottom>
|
||||||
|
<view class="card-price-box u-flex">
|
||||||
|
<text class="order-price font-OPPOSANS">￥{{ orderItemDetail.goods_price || 0 }}</text>
|
||||||
|
<button class="u-reset-button status-btn" v-if="orderItemDetail.status_name">{{ orderItemDetail.status_name }}</button>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</shopro-mini-card>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 售后类型 -->
|
||||||
|
<view class="refund-item">
|
||||||
|
<view class="item-title">请选择售后类型</view>
|
||||||
|
<u-radio-group v-model="refundType" active-color="#d89f64" width="100%">
|
||||||
|
<u-radio shape="circle" v-for="(item, index) in refundTypeList" :key="index" :name="item.value">{{ item.title }}</u-radio>
|
||||||
|
</u-radio-group>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 申请原因 -->
|
||||||
|
<view class="goods-item u-flex u-row-between" @tap="showModal = true">
|
||||||
|
<text class="item-title">选择申请原因</text>
|
||||||
|
<view class="u-flex refund-cause">
|
||||||
|
<text class="u-m-r-20" style="color: #333;" v-if="refundCause">{{ refundCause }}</text>
|
||||||
|
<text class="u-m-r-20" v-else>请选择申请原因~</text>
|
||||||
|
<text class="u-iconfont uicon-arrow-right" style="color: #666"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 联系方式 -->
|
||||||
|
<view class="refund-item u-m-b-20">
|
||||||
|
<view class="item-title">联系方式</view>
|
||||||
|
<view class="input-box u-flex"><input type="number" class="item-input" v-model="phone" placeholder="请输入您的联系电话" placeholder-class="input--pl" /></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 留言 -->
|
||||||
|
<view class="refund-item u-m-b-20">
|
||||||
|
<view class="item-title">相关描述</view>
|
||||||
|
<view class="describe-box">
|
||||||
|
<textarea
|
||||||
|
class="describe-content"
|
||||||
|
v-model="refundContent"
|
||||||
|
maxlength="120"
|
||||||
|
placeholder="客官~请描述您遇到的问题，建议上传照片"
|
||||||
|
placeholder-class="input--pl"
|
||||||
|
fixed
|
||||||
|
></textarea>
|
||||||
|
<view class="upload-img">
|
||||||
|
<u-upload
|
||||||
|
:showProgress="false"
|
||||||
|
@on-uploaded="uploadSuccess"
|
||||||
|
@on-remove="uploadRemove"
|
||||||
|
:action="`${$BASE_URL}/api/common/upload`"
|
||||||
|
:header="{token: token}"
|
||||||
|
width="140"
|
||||||
|
height="140"
|
||||||
|
maxCount="9"
|
||||||
|
></u-upload>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部按钮 -->
|
||||||
|
<view class="foot-wrap safe-area-inset-bottom">
|
||||||
|
<view class="foot_box u-flex u-row-between safe-area-inset-bottom">
|
||||||
|
<button class="u-reset-button contcat-btn" @tap="onService">联系客服</button>
|
||||||
|
<button class="u-reset-button sub-btn" @tap="postAftersale">提交</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 申请原因弹窗 -->
|
||||||
|
<u-popup v-model="showModal" safe-area-inset-bottom @close="showModal = false" mode="bottom" :closeable="true" close-icon-pos="top-left">
|
||||||
|
<view class="modal-box page_box">
|
||||||
|
<view class="modal-head head_box u-flex u-row-center u-col-center">{{ refundList.title }}</view>
|
||||||
|
<view class="modal-content content_box">
|
||||||
|
<view class="u-flex-col u-p-20">
|
||||||
|
<u-radio-group v-model="refundCause" active-color="#d89f64" width="100%">
|
||||||
|
<u-radio class="u-m-y-10" shape="circle" v-for="item in refundList.list" :key="item.id" :name="item.val">
|
||||||
|
<text class="u-p-l-20">{{ item.val }}</text>
|
||||||
|
</u-radio>
|
||||||
|
</u-radio-group>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="modal-foot foot_box u-flex u-row-center u-col-center"><button class="u-reset-button close-btn" @tap="showModal = false">确定</button></view>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showModal: false,
|
||||||
|
imgList: [], //图片地址
|
||||||
|
orderId: 0, //订单ID
|
||||||
|
orderItemDetail: {}, //订单信息
|
||||||
|
refundType: '', //售后类型
|
||||||
|
refundCause: '', //退款原因
|
||||||
|
refundContent: '', //相关描述
|
||||||
|
phone: '', //联系方式
|
||||||
|
refundTypeList: [
|
||||||
|
//售后类型
|
||||||
|
{
|
||||||
|
title: '退款',
|
||||||
|
value: 'refund'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '退货',
|
||||||
|
value: 'return'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '其他',
|
||||||
|
value: 'other'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
refundList: {
|
||||||
|
//申请原因
|
||||||
|
title: '申请原因',
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
val: '卖家发错货了'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
val: '退运费'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
val: '大小/重量于商品描述不符'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
val: '生产日期、保质期与商品不符'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
val: '质量问题'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
token: uni.getStorageSync('token')
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
onLoad() {
|
||||||
|
this.getOrderItemDetail();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 跳转客服
|
||||||
|
onService() {
|
||||||
|
this.$Router.push('/pages/public/chat/index');
|
||||||
|
},
|
||||||
|
|
||||||
|
// 上传图片成功
|
||||||
|
uploadSuccess(e) {
|
||||||
|
this.imgList = [];
|
||||||
|
e.forEach(item => {
|
||||||
|
this.imgList.push(item.response.data.url);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 移除图片
|
||||||
|
uploadRemove(index) {
|
||||||
|
this.imgList.splice(index, 1);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 订单item详情
|
||||||
|
getOrderItemDetail() {
|
||||||
|
let that = this;
|
||||||
|
that.$http('order.itemDetail', {
|
||||||
|
id: that.$Route.query.orderId,
|
||||||
|
order_item_id: that.$Route.query.orderItemId
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code === 1) {
|
||||||
|
that.orderItemDetail = res.data;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 提交售后
|
||||||
|
postAftersale() {
|
||||||
|
let that = this;
|
||||||
|
that.$http('order.aftersale', {
|
||||||
|
type: that.refundType,
|
||||||
|
order_id: that.$Route.query.orderId,
|
||||||
|
order_item_id: that.$Route.query.orderItemId,
|
||||||
|
reason: that.refundCause,
|
||||||
|
content: that.refundContent,
|
||||||
|
images: that.imgList,
|
||||||
|
phone: that.phone
|
||||||
|
}, '申请中...').then(res => {
|
||||||
|
if (res.code === 1) {
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
that.$store.commit('subscribeMessage', 'aftersale');
|
||||||
|
// #endif
|
||||||
|
that.$Router.back();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
// 售后项目
|
||||||
|
.refund-item {
|
||||||
|
background-color: #fff;
|
||||||
|
border-bottom: 1rpx solid #f5f5f5;
|
||||||
|
padding: 30rpx;
|
||||||
|
.item-title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: rgba(51, 51, 51, 1);
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 留言
|
||||||
|
.describe-box {
|
||||||
|
width: 690rpx;
|
||||||
|
background: rgba(249, 250, 251, 1);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
.describe-content {
|
||||||
|
width: 660rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
height: 200rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.input--pl {
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
color: rgba(177, 179, 199, 1);
|
||||||
|
}
|
||||||
|
// 联系方式
|
||||||
|
.input-box {
|
||||||
|
height: 84rpx;
|
||||||
|
background: rgba(249, 250, 251, 1);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
.item-input {
|
||||||
|
padding: 0 30rpx;
|
||||||
|
flex: 1;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-box {
|
||||||
|
background: #fff;
|
||||||
|
padding: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
.order-sku {
|
||||||
|
font-size: 24rpx;
|
||||||
|
|
||||||
|
font-weight: 400;
|
||||||
|
color: rgba(153, 153, 153, 1);
|
||||||
|
width: 450rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
.order-num {
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.card-price-box {
|
||||||
|
.status-btn {
|
||||||
|
height: 32rpx;
|
||||||
|
border: 1rpx solid rgba(207, 169, 114, 1);
|
||||||
|
border-radius: 15rpx;
|
||||||
|
font-size: 20rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
color: rgba(168, 112, 13, 1);
|
||||||
|
padding: 0 10rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
background: rgba(233, 183, 102, 0.16);
|
||||||
|
}
|
||||||
|
.order-price {
|
||||||
|
font-size: 26rpx;
|
||||||
|
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgba(51, 51, 51, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-item {
|
||||||
|
height: 95rpx;
|
||||||
|
background: #fff;
|
||||||
|
padding: 0 25rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
|
// 售后原因
|
||||||
|
.refund-cause {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
color: rgba(177, 179, 199, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-of-type(2n) {
|
||||||
|
margin-bottom: 0;
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #a8700d;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-img {
|
||||||
|
padding: 25rpx;
|
||||||
|
|
||||||
|
.upload-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.choose-img,
|
||||||
|
.preview-box {
|
||||||
|
width: 110rpx;
|
||||||
|
height: 110rpx;
|
||||||
|
background: rgba(249, 250, 251, 1);
|
||||||
|
border: 1rpx solid rgba(223, 223, 223, 1);
|
||||||
|
margin-right: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:nth-child(5n) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
.preview-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.foot-wrap {
|
||||||
|
height: 100rpx;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.foot_box {
|
||||||
|
height: 100rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
border-top: 1rpx solid #f5f5f5;
|
||||||
|
.sub-btn {
|
||||||
|
width: 340rpx;
|
||||||
|
line-height: 74rpx;
|
||||||
|
background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
|
||||||
|
border: 1rpx solid rgba(238, 238, 238, 1);
|
||||||
|
border-radius: 38rpx;
|
||||||
|
color: rgba(#fff, 0.9);
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
.contcat-btn {
|
||||||
|
width: 340rpx;
|
||||||
|
line-height: 74rpx;
|
||||||
|
background: rgba(238, 238, 238, 1);
|
||||||
|
border-radius: 38rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
|
||||||
|
font-weight: 400;
|
||||||
|
color: rgba(51, 51, 51, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-box {
|
||||||
|
width: 750rpx;
|
||||||
|
height: 680rpx;
|
||||||
|
border-radius: 30rpx 30rpx 0 0;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
.modal-head {
|
||||||
|
height: 100rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
font-size: 28rpx;
|
||||||
|
|
||||||
|
.sel-item {
|
||||||
|
height: 100rpx;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
border-bottom: 1rpx solid rgba(223, 223, 223, 0.5);
|
||||||
|
|
||||||
|
.sel-radio {
|
||||||
|
transform: scale(0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-foot {
|
||||||
|
.close-btn {
|
||||||
|
width: 710rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
|
||||||
|
border: 1rpx solid rgba(238, 238, 238, 1);
|
||||||
|
border-radius: 40rpx;
|
||||||
|
color: rgba(#fff, 0.9);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,116 @@
|
|||||||
|
<template>
|
||||||
|
<view class="select-coupon-wrap ">
|
||||||
|
<view class="coupon-item u-flex u-row-between">
|
||||||
|
<view class="item-title">优惠券</view>
|
||||||
|
<view class="u-flex" @tap="showModal = true">
|
||||||
|
<text class="price" v-if="couponList.length">{{ title }}</text>
|
||||||
|
<text class="sel-coupon" v-else>暂无优惠券</text>
|
||||||
|
<text class="u-iconfont uicon-arrow-right" style="color: #bfbfbf"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<u-popup v-model="showModal" mode="bottom" :closeable="true" close-icon-pos="top-right" border-radius="30">
|
||||||
|
<view class="modal-box page_box">
|
||||||
|
<view class="modal-head u-flex u-row-center u-col-center"><text class="head-title">选择优惠券</text></view>
|
||||||
|
<view class="modal-content content_box u-flex-col u-p-20">
|
||||||
|
<u-radio-group v-model="radio" @change="radioGroupChange" width="100%" activeColor="#e9b564">
|
||||||
|
<view class="radio-item">
|
||||||
|
<u-radio :name="0"><text class="coupon-title u-p-l-10">不使用优惠券</text></u-radio>
|
||||||
|
</view>
|
||||||
|
<view class="radio-item" v-for="(radio, index) in couponList" :key="radio.user_coupons_id">
|
||||||
|
<u-radio :name="index + 1">
|
||||||
|
<text class="coupon-title u-p-l-10">{{ radio.name }}:{{ `满${radio.enough}减${radio.amount}` }}</text>
|
||||||
|
</u-radio>
|
||||||
|
</view>
|
||||||
|
</u-radio-group>
|
||||||
|
</view>
|
||||||
|
<button class="u-reset-button serve-btn" @tap="showModal = false">确定</button>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* 选择优惠券模态框
|
||||||
|
* @property {Object} couponList - 可用优惠券列表数据
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showModal: false,
|
||||||
|
radio: 0,
|
||||||
|
title: '选择优惠券'
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
couponList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {
|
||||||
|
radioGroupChange(index) {
|
||||||
|
this.title = index > 0 ? '-￥' + this.couponList[index - 1].amount : '选择优惠券';
|
||||||
|
this.$emit('change', index - 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// 优惠券项
|
||||||
|
.coupon-item {
|
||||||
|
border-top: 1rpx solid rgba(#dfdfdf, 0.5);
|
||||||
|
height: 100rpx;
|
||||||
|
background: #fff;
|
||||||
|
padding: 0 25rpx;
|
||||||
|
.item-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
.price {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #ff0000;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
.sel-coupon {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #c4c4c4;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 模态框
|
||||||
|
.modal-box {
|
||||||
|
width: 750rpx;
|
||||||
|
height: 700rpx;
|
||||||
|
background: #fff;
|
||||||
|
padding: 30rpx;
|
||||||
|
|
||||||
|
// 按钮
|
||||||
|
.serve-btn {
|
||||||
|
width: 690rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
background: linear-gradient(90deg, rgba(240, 199, 133, 1), rgba(246, 214, 157, 1));
|
||||||
|
border-radius: 40rpx;
|
||||||
|
color: rgba(#fff, 0.9);
|
||||||
|
margin-top: 40rpx;
|
||||||
|
}
|
||||||
|
.radio-item {
|
||||||
|
width: 690rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
// 标题
|
||||||
|
.modal-head {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
.head-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,217 @@
|
|||||||
|
<!-- 物流信息 -->
|
||||||
|
<template>
|
||||||
|
<view class="map-box">
|
||||||
|
<!-- 商品卡片 -->
|
||||||
|
<view class="oilStation-top">
|
||||||
|
<view class="u-flex u-row-between express-card__head">
|
||||||
|
<view class="u-flex">
|
||||||
|
<view class="img-box">
|
||||||
|
<image class="goods-image" :src="firstGoods.goods_image" mode="aspectFill"></image>
|
||||||
|
<view class="shop-tag">{{ goodsList.length || 0 }}件商品</view>
|
||||||
|
</view>
|
||||||
|
<text class="express-status">{{ firstGoods.status_name || '' }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="express-sn u-flex u-col-center ">
|
||||||
|
<text class="u-m-r-30">{{ expressDetail.express_name || '' }}
|
||||||
|
{{ expressDetail.express_no || '' }}</text>
|
||||||
|
<text class="u-iconfont uicon-file-text" style="color: #666;font-size: 32rpx;"
|
||||||
|
@tap="copyCode(expressDetail.express_no)"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 物流时间轴 -->
|
||||||
|
<view class="oilStation-bottom">
|
||||||
|
<view class="u-p-y-30">
|
||||||
|
<view v-if="exrpessLog.length" class="express-item u-flex u-col-center"
|
||||||
|
v-for="(log, index) in exrpessLog" :key="log.id">
|
||||||
|
<view class="item-left">
|
||||||
|
<view class="day">{{ log.changedate.split(' ')[0]}}</view>
|
||||||
|
<view class="time">{{ log.changedate.split(' ')[1] }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-right">
|
||||||
|
<image class="express-tag"
|
||||||
|
:src="$IMG_URL + `/imgs/order/express${index == 0 ? log.status + '' + log.status : log.status}.png`"
|
||||||
|
mode="aspectFill"></image>
|
||||||
|
<view class="express-title">{{ log.status_name }}</view>
|
||||||
|
<view class="express-detail">{{ log.content }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="!exrpessLog.length" class="no-log u-flex u-row-center u-col-center">暂无物流信息~</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
expressDetail: {}, //物流信息
|
||||||
|
exrpessLog: [], //包裹轨迹
|
||||||
|
firstGoods: {}, //商品列表
|
||||||
|
goodsList: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
onLoad() {
|
||||||
|
this.getExpressDetail();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 复制物流码
|
||||||
|
copyCode(code) {
|
||||||
|
let that = this;
|
||||||
|
uni.setClipboardData({
|
||||||
|
data: code,
|
||||||
|
success: () => {
|
||||||
|
that.$u.toast('已复制到剪切板');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 获取物流信息
|
||||||
|
getExpressDetail() {
|
||||||
|
let that = this;
|
||||||
|
that.$http('order.expressDetail', {
|
||||||
|
id: that.$Route.query.expressId,
|
||||||
|
order_id: that.$Route.query.orderId
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code === 1) {
|
||||||
|
that.expressDetail = res.data;
|
||||||
|
that.goodsList = res.data.item;
|
||||||
|
that.exrpessLog = res.data.log;
|
||||||
|
that.firstGoods = res.data.item[0];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
/* 物流卡片 */
|
||||||
|
.oilStation-top {
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #fff;
|
||||||
|
margin: 20rpx;
|
||||||
|
background: rgba(255, 255, 255, 1);
|
||||||
|
box-shadow: 0 1rpx 18rpx 0 rgba(184, 184, 184, 0.55);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
|
||||||
|
.express-card__head {
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-box {
|
||||||
|
position: relative;
|
||||||
|
width: 129rpx;
|
||||||
|
height: 129rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #ccc;
|
||||||
|
|
||||||
|
.goods-image {
|
||||||
|
width: 129rpx;
|
||||||
|
height: 129rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-tag {
|
||||||
|
position: absolute;
|
||||||
|
width: 129rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
font-size: 18rpx;
|
||||||
|
|
||||||
|
font-weight: 400;
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
text-align: center;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.express-status {
|
||||||
|
font-size: 30rpx;
|
||||||
|
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(51, 51, 51, 1);
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.express-sn {
|
||||||
|
width: 100%;
|
||||||
|
height: 65rpx;
|
||||||
|
background: rgba(250, 251, 255, 1);
|
||||||
|
border-radius: 0 0 20rpx 20rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(102, 102, 102, 1);
|
||||||
|
padding: 0 30rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.oilStation-bottom {
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: row;
|
||||||
|
background: #fff;
|
||||||
|
width: 710rpx;
|
||||||
|
margin: 0 20rpx 20rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
box-shadow: 0 1rpx 18rpx 0 rgba(184, 184, 184, 0.55);
|
||||||
|
padding: 0 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 物流步骤条
|
||||||
|
.no-log {
|
||||||
|
width: 100%;
|
||||||
|
height: 100rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.express-item {
|
||||||
|
align-items: flex-start;
|
||||||
|
.item-left {
|
||||||
|
.day {
|
||||||
|
font-size: 26rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.time {
|
||||||
|
font-size: 20rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-right {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 54rpx;
|
||||||
|
margin-left: 54rpx;
|
||||||
|
border-left: 1rpx solid #e7e7e7;
|
||||||
|
padding-bottom: 40rpx;
|
||||||
|
|
||||||
|
.express-tag {
|
||||||
|
width: 54rpx;
|
||||||
|
height: 54rpx;
|
||||||
|
position: absolute;
|
||||||
|
left: -27rpx;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.express-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(51, 51, 51, 1);
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.express-detail {
|
||||||
|
width: 400rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(51, 51, 51, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue