初始化代码
This commit is contained in:
256
uniapp/uni-app/shop/pages/car.vue
Normal file
256
uniapp/uni-app/shop/pages/car.vue
Normal file
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<view class="pages-shop" v-if="isLoad">
|
||||
<view class="item-child mb-md ml-sm mr-sm pt-lg pl-lg pr-lg fill-base radius-24" :class="[{'mt-md':index==0}]"
|
||||
v-for="(item,index) in shopCarList.list" :key="index">
|
||||
<view @tap="goDetail(index)" class="flex-y-center mb-lg">
|
||||
<i class="iconfont icon-dianpu mr-sm"></i>
|
||||
<view class="f-title c-title text-bold ellipsis">{{item.farmer_info.title}}</view>
|
||||
<i class="iconfont icon-right"></i>
|
||||
</view>
|
||||
<view @tap.stop="toUpdateStatus(index,aindex)" class="flex-warp pb-lg b-1px-b"
|
||||
:class="[{'pt-lg':aindex!=0}]" v-for="(aitem,aindex) in item.goods_list" :key="aindex">
|
||||
<i class="iconfont flex-y-center mr-md"
|
||||
:class="[{'icon-xuanze':!aitem.status},{'icon-xuanze-fill':aitem.status}]"
|
||||
:style="{color:aitem.status?primaryColor:''}"></i>
|
||||
<image mode="aspectFill" lazy-load class="goods-img radius-16" :src="aitem.cover">
|
||||
</image>
|
||||
<view class="flex-1 ml-md">
|
||||
<view class="goods-title f-title c-title text-bold ellipsis">
|
||||
{{aitem.goods_name}}
|
||||
</view>
|
||||
<view class="flex-between mt-sm">
|
||||
<view class="goods-spe pl-sm pr-sm f-caption c-paragraph ellipsis radius-4">
|
||||
{{aitem.spe_name}}
|
||||
</view>
|
||||
<view class="flex-1"></view>
|
||||
</view>
|
||||
<view class="f-desc c-warning mt-sm" v-if="aitem.integral_id">
|
||||
{{aitem.i_price*1>0?`${aitem.integral}积分+${aitem.i_price}元`:`${aitem.integral}积分`}}
|
||||
</view>
|
||||
<view class="flex-between" :class="[{'mt-md':!aitem.integral_id}]">
|
||||
<view class="flex-y-baseline f-caption c-warning">
|
||||
<view class="f-caption c-caption mr-sm" v-if="aitem.integral_id">商城价</view>
|
||||
¥<view class="f-title text-bold"> {{aitem.price}} </view>
|
||||
</view>
|
||||
<view class="flex-warp">
|
||||
<view class="add-remove-item flex-center">
|
||||
<i @tap.stop="toUpdateCar(aitem.farmer_id,aitem.id,aitem.spe_id,-1)"
|
||||
class="iconfont icon-remove-circle c-caption"></i>
|
||||
<view class="number flex-center f-desc pl-sm pr-sm">{{aitem.goods_num}}
|
||||
</view>
|
||||
<i @tap.stop="toUpdateCar(aitem.farmer_id,aitem.goods_id,aitem.spe_id,1)"
|
||||
class="iconfont icon-add-circle" :style="{color:primaryColor}"></i>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<abnor v-if="shopCarList.list.length<=0"></abnor>
|
||||
<view class="space-footer"></view>
|
||||
<view class="fix footer-info flex-center" v-if="shopCarList.list.length > 0">
|
||||
<view class="item-height flex-1 flex-between fill-base pl-lg pr-lg">
|
||||
<view @tap="toUpdateStatus(-1)" class="flex-y-center">
|
||||
<i class="iconfont mr-md"
|
||||
:class="[{'icon-xuanze':!shopCarList.selectAll},{'icon-xuanze-fill':shopCarList.selectAll}]"
|
||||
:style="{color:shopCarList.selectAll?primaryColor:''}"></i>全选
|
||||
</view>
|
||||
<view class="flex-y-baseline f-paragraph c-title" style="line-height: 35rpx;">
|
||||
合计：
|
||||
<view class="f-title c-warning text-bold">
|
||||
¥{{shopCarList.car_price || 0}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view @tap="goOrder" class="item-height pay-btn flex-center f-sm-title c-base"
|
||||
:style="{background:primaryColor}">去付款
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions,
|
||||
mapMutations
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
isLoad: false,
|
||||
options: {},
|
||||
lockTap: false
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
userInfo: state => state.user.userInfo,
|
||||
shopCarList: state => state.order.shopCarList,
|
||||
}),
|
||||
async onLoad(options) {
|
||||
this.$util.showLoading()
|
||||
this.options = options
|
||||
await this.initIndex()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.showNavigationBarLoading()
|
||||
// #endif
|
||||
this.initRefresh()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getConfigInfo', 'updateCommonOptions', 'getShopCarList']),
|
||||
...mapMutations(['updateUserItem']),
|
||||
async initIndex() {
|
||||
await this.getShopCarList()
|
||||
this.$util.hideAll()
|
||||
this.isLoad = true
|
||||
},
|
||||
initRefresh() {
|
||||
this.initIndex()
|
||||
},
|
||||
// 修改购物车数量
|
||||
// id 增加数量时传商品goods_id
|
||||
async toUpdateCar(store_id, id, spe_id, goods_num, isCar = 1) {
|
||||
let methodModel = goods_num > 0 ? 'addCar' : 'delCar'
|
||||
let param = goods_num > 0 ? {
|
||||
store_id,
|
||||
goods_id: id,
|
||||
spe_id,
|
||||
goods_num,
|
||||
} : {
|
||||
id,
|
||||
goods_num: 1
|
||||
}
|
||||
if (this.lockTap) return;
|
||||
this.lockTap = true;
|
||||
try {
|
||||
await this.$api.shop[methodModel](param)
|
||||
this.lockTap = false
|
||||
await this.getShopCarList()
|
||||
} catch (e) {
|
||||
this.lockTap = false
|
||||
}
|
||||
},
|
||||
// 修改购物车数据选择状态
|
||||
async toUpdateStatus(index, aindex) {
|
||||
let param = {}
|
||||
if (index === -1) {
|
||||
let selectAll = !this.shopCarList.selectAll
|
||||
this.selectAll = selectAll
|
||||
param = {
|
||||
status: selectAll ? 1 : 0
|
||||
}
|
||||
} else {
|
||||
let {
|
||||
id,
|
||||
status
|
||||
} = this.shopCarList.list[index].goods_list[aindex]
|
||||
param = {
|
||||
id: [id],
|
||||
status: status == 1 ? 0 : 1
|
||||
}
|
||||
}
|
||||
if (this.lockTap) return;
|
||||
this.lockTap = true;
|
||||
try {
|
||||
await this.$api.shop.carUpdate(param)
|
||||
this.lockTap = false
|
||||
await this.getShopCarList()
|
||||
} catch (e) {
|
||||
this.lockTap = false
|
||||
}
|
||||
},
|
||||
// 清空购物车
|
||||
async toDelCar() {
|
||||
await this.$api.shop.delSomeCar()
|
||||
this.$util.showToast({
|
||||
title: `清空成功`
|
||||
})
|
||||
this.$refs.show_car_item.close()
|
||||
await this.getCarInfo()
|
||||
},
|
||||
goDetail(index) {
|
||||
let {
|
||||
farmer_id: id
|
||||
} = this.shopCarList.list[index]
|
||||
let url = `/shop/pages/store?id=${id}`
|
||||
this.$util.goUrl({
|
||||
url
|
||||
})
|
||||
},
|
||||
// 去结算
|
||||
goOrder() {
|
||||
let {
|
||||
car_count
|
||||
} = this.shopCarList
|
||||
if (car_count < 1) {
|
||||
this.$util.showToast({
|
||||
title: `请选择商品`
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$util.goUrl({
|
||||
url: `/shop/pages/order`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.pages-shop {
|
||||
|
||||
|
||||
.icon-xuanze,
|
||||
.icon-xuanze-fill {
|
||||
font-size: 38rpx;
|
||||
}
|
||||
|
||||
.item-child {
|
||||
|
||||
.icon-xuanze,
|
||||
.icon-xuanze-fill {
|
||||
height: 172rpx;
|
||||
}
|
||||
|
||||
.goods-img {
|
||||
width: 172rpx;
|
||||
height: 172rpx;
|
||||
}
|
||||
|
||||
.goods-title {
|
||||
max-width: 420rpx;
|
||||
}
|
||||
|
||||
.goods-spe {
|
||||
height: 44rpx;
|
||||
line-height: 44rpx;
|
||||
background: #F7F7F7;
|
||||
max-width: 420rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-info {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
.item-height {
|
||||
height: 90rpx;
|
||||
height: calc(90rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
|
||||
.pay-btn {
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
291
uniapp/uni-app/shop/pages/choose-store.vue
Normal file
291
uniapp/uni-app/shop/pages/choose-store.vue
Normal file
@@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<view class="shop-choose-store" v-if="isLoad">
|
||||
<fixed>
|
||||
|
||||
<view class="rel">
|
||||
<view class="user-store-info abs">
|
||||
<image mode="aspectFill" lazy-load class="store-bg abs" src="https://lbqny.migugu.com/admin/farm/bg-store.png">
|
||||
</image>
|
||||
</view>
|
||||
<uni-nav-bar :fixed="false" :shadow="false" :statusBar="true" :onlyLeft="true" color="#fff"
|
||||
:backgroundColor="`none`">
|
||||
<view @tap.stop="toChooseLocation" class="flex-y-center" slot="left">
|
||||
<i class="iconfont icon-dingwei mr-sm"></i>
|
||||
<view class="text-bold max-400 ellipsis">
|
||||
{{location.address ?location.address : isLoad ? '定位失败' : '定位中...'}}
|
||||
</view>
|
||||
<i class="iconfont icon-down-bold ml-sm"></i>
|
||||
</view>
|
||||
</uni-nav-bar>
|
||||
<view class="search-box-radius fill-base">
|
||||
<search @input="toSearch" @confirm="toSearch" type="input" :radius="30"
|
||||
:disabled="location.address ? false : true" placeholder="搜索店铺名称"></search>
|
||||
</view>
|
||||
</view>
|
||||
</fixed>
|
||||
|
||||
<view @tap.stop="goDetail(index)" class="farm-item rel fill-base mt-md ml-md mr-md pd-lg box-shadow radius-24"
|
||||
v-for="(item,index) in list.data" :key="index">
|
||||
<view class="more-btn abs flex-center">
|
||||
<view class="flex-y-baseline" :style="{color:primaryColor}">
|
||||
<view>进店选购</view>
|
||||
<i class="iconfont icon-right"></i>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-center">
|
||||
<image mode="aspectFill" lazy-load class="cover box-shadow-mini radius-24" :src="item.cover"></image>
|
||||
<view class="flex-1 ml-lg">
|
||||
<view class="flex-between f-title c-title mt-sm mb-sm">
|
||||
<view class="max-300 ellipsis">{{item.title}}</view>
|
||||
<view class="f-caption c-caption">
|
||||
{{item.distance}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="star-fill-info rel">
|
||||
<view class="flex-warp star rel">
|
||||
<view class="item-star flex-center" v-for="(aitem,aindex) in 5" :key="aindex">
|
||||
<i class="iconfont icon-star-bold-fill"></i>
|
||||
</view>
|
||||
</view>
|
||||
<view class="star-fill abs" :style="{width: item.star_percent}">
|
||||
<view class="flex-warp">
|
||||
<view class="item-star flex-center" v-for="(aitem,aindex) in 5" :key="aindex">
|
||||
<i class="iconfont icon-star-bold-fill icon-font-color"
|
||||
:style="{backgroundImage: '-webkit-linear-gradient(90deg, #FDCD47, #FFC000)'}"></i>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-y-center f-caption c-caption mt-sm"><i class="iconfont icon-dingwei mr-sm"></i>
|
||||
<view class="addr-text ellipsis">{{item.address}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
|
||||
</load-more>
|
||||
<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
|
||||
<abnor @confirm="$util.checkAuth({ type: 'userLocation' })" :tip="[{ text: '定位失败，请开启地理位置授权后重试~', color: 0 }]"
|
||||
:button="[{ text: '开启定位' , type: 'confirm' }]" btnSize="" v-if="!loading && !location.lng"> </abnor>
|
||||
|
||||
<view class="space-max-footer"></view>
|
||||
|
||||
<fix-bottom-button @confirm="$util.goUrl({ url: 1, openType: `navigateBack` })"
|
||||
:text="[{ text: '返回上页', type: 'confirm' }]" bgColor="#fff" v-if="isLoad"> </fix-bottom-button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions,
|
||||
mapMutations
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
isLoad: false,
|
||||
param: {
|
||||
page: 1,
|
||||
long: '',
|
||||
lat: '',
|
||||
store_name: ''
|
||||
},
|
||||
list: {
|
||||
data: []
|
||||
},
|
||||
loading: true,
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
userInfo: state => state.user.userInfo,
|
||||
location: state => state.user.location,
|
||||
}),
|
||||
onLoad() {
|
||||
this.$util.setNavigationBarColor({
|
||||
color: '#ffffff',
|
||||
bg: ''
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
this.initIndex()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.showNavigationBarLoading()
|
||||
// #endif
|
||||
this.initRefresh()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.list.current_page >= this.list.last_page || this.loading) return
|
||||
this.param.page = this.param.page + 1
|
||||
this.loading = true
|
||||
this.getList()
|
||||
},
|
||||
onShareAppMessage(e) {
|
||||
let path = `/user/pages/store-list`
|
||||
this.$util.log(path);
|
||||
return {
|
||||
title: '',
|
||||
imageUrl: '',
|
||||
path,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getUserInfo', 'getShopCarList']),
|
||||
...mapMutations(['updateUserItem']),
|
||||
async initIndex() {
|
||||
let {
|
||||
location
|
||||
} = this
|
||||
if (!location.lat) {
|
||||
location = await this.$util.getBmapLocation()
|
||||
this.updateUserItem({
|
||||
key: 'location',
|
||||
val: location
|
||||
})
|
||||
}
|
||||
if (!location.lng) {
|
||||
this.loading = false
|
||||
this.isLoad = true
|
||||
return
|
||||
}
|
||||
await this.getList()
|
||||
},
|
||||
initRefresh() {
|
||||
this.param.page = 1
|
||||
this.initIndex()
|
||||
},
|
||||
toSearch(val) {
|
||||
this.param.page = 1
|
||||
this.param.store_name = val
|
||||
this.getList()
|
||||
},
|
||||
async getList() {
|
||||
let {
|
||||
list: oldList,
|
||||
param,
|
||||
location
|
||||
} = this
|
||||
let {
|
||||
lng = 0,
|
||||
lat = 0
|
||||
} = location
|
||||
param.lng = lng
|
||||
param.lat = lat
|
||||
let newList = await this.$api.shop.indexStoreList(param);
|
||||
newList.data.map(item => {
|
||||
item.is_open = 1
|
||||
item.star_percent = (item.star * 1 / 5 * 100).toFixed(2) + '%'
|
||||
})
|
||||
if (this.param.page == 1) {
|
||||
this.list = newList
|
||||
} else {
|
||||
newList.data = oldList.data.concat(newList.data)
|
||||
this.list = newList
|
||||
}
|
||||
this.loading = false
|
||||
this.isLoad = true
|
||||
this.$util.hideAll()
|
||||
},
|
||||
// 选择地区
|
||||
async toChooseLocation(e) {
|
||||
await this.$util.checkAuth({
|
||||
type: 'userLocation'
|
||||
})
|
||||
|
||||
let [, {
|
||||
address = '',
|
||||
longitude: lng,
|
||||
latitude: lat
|
||||
} = {}] = await uni.chooseLocation();
|
||||
if (!lng) return
|
||||
let location = {
|
||||
lng,
|
||||
lat,
|
||||
address
|
||||
}
|
||||
this.updateUserItem({
|
||||
key: 'location',
|
||||
val: location
|
||||
})
|
||||
this.location = location
|
||||
this.param.page = 1
|
||||
this.getList()
|
||||
},
|
||||
async goDetail(index) {
|
||||
let {
|
||||
id
|
||||
} = this.list.data[index]
|
||||
let url = `/shop/pages/store?id=${id}`
|
||||
this.$util.goUrl({
|
||||
url,
|
||||
openType: 'redirectTo'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.shop-choose-store {
|
||||
|
||||
.user-store-info {
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
|
||||
.store-bg {
|
||||
width: 100%;
|
||||
height: 168rpx;
|
||||
height: calc(168rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(5px + env(safe-area-inset-bottom) / 2);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.search-box-radius {
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
}
|
||||
|
||||
|
||||
.farm-item {
|
||||
.cover {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.icon-dingwei {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
|
||||
.addr-text {
|
||||
max-width: 420rpx;
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 122rpx;
|
||||
height: 46rpx;
|
||||
font-size: 20rpx;
|
||||
background: rgba(112, 152, 64, 0.1);
|
||||
border-radius: 0 25rpx 0 15rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
237
uniapp/uni-app/shop/pages/coupon.vue
Normal file
237
uniapp/uni-app/shop/pages/coupon.vue
Normal file
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<view class="shop-coupon">
|
||||
<view class="list-item fill-base mg-big pd-lg radius-34" v-for="(item,index) in list.data" :key="index">
|
||||
<view class="flex-between">
|
||||
<view class="flex-center flex-column">
|
||||
<view class="flex-y-baseline f-caption c-warning">¥<view class="f-large-title">{{item.discount}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="f-caption c-title">优惠券</view>
|
||||
</view>
|
||||
<view class="flex-1 ml-lg flex-between">
|
||||
<view class="f-title c-title mr-lg">
|
||||
<view class="text-bold">{{item.title}}</view>
|
||||
<view class="f-icontext mt-sm">{{item.type==0?`满${item.full}元可用`:'无门槛'}}</view>
|
||||
<view @tap.stop="this.list.data[index].is_show = !this.list.data[index].is_show"
|
||||
class="flex-y-baseline f-icontext mt-sm">查看详情
|
||||
<i class="iconfont ml-sm" style="font-size: 24rpx;"
|
||||
:class="[{'icon-down':!item.is_show},{'icon-up':item.is_show}]"></i>
|
||||
</view>
|
||||
</view>
|
||||
<auth :needAuth="userInfo && (!userInfo.nickName || !userInfo.phone)"
|
||||
:type="!userInfo.nickName?'userInfo':'phone'"
|
||||
:content="!userInfo.nickName ? '': configInfo.member_default_level ? `尊贵的用户，成为${configInfo.member_default_level}需要获取授权，授权成功后可领取相关卡券优惠` : ''"
|
||||
:must="!userInfo.nickName ? true : false" @go="toGetCoupon(index)" class="use-btn">
|
||||
<view class="use-btn flex-center f-caption c-base radius" :style="{background:primaryColor}">
|
||||
领取
|
||||
</view>
|
||||
</auth>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-lg pd-lg f-icontext c-title radius-16" style="background: #F9FAF9" v-if="item.is_show">
|
||||
<view class="flex-warp">
|
||||
<view>使用时间：</view>
|
||||
<view class="flex-1 c-desc">{{item.time_limit == 2 ? `自领取后${item.day}天内可用` : item.start_time}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-warp mt-md">
|
||||
<view>使用范围：</view>
|
||||
<view class="flex-1 c-desc">{{item.use_range}}</view>
|
||||
</view>
|
||||
<view class="flex-warp mt-md">
|
||||
<view>使用规则：</view>
|
||||
<view class="flex-1 c-desc">
|
||||
<text decode="emsp" style="word-break:break-all;">{{item.rule}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-warp mt-md">
|
||||
<view>优惠详情：</view>
|
||||
<view class="flex-1 c-desc">
|
||||
<text decode="emsp" style="word-break:break-all;">{{item.text}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
|
||||
</load-more>
|
||||
<abnor type="COUPON" v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
|
||||
|
||||
<view class="space-footer"></view>
|
||||
|
||||
<uni-popup ref="show_coupon_succ_item" type="center" :custom="true" :maskClick="false">
|
||||
<view style="height: 100rpx;"></view>
|
||||
<view class="popup-coupon fill-base flex-center flex-column pt-lg radius-24">
|
||||
<image class="success-img" src="https://lbqny.migugu.com/admin/farm/success.png"></image>
|
||||
<view class="f-title c-title text-bold">恭喜您,领取成功</view>
|
||||
<!-- <view class="f-paragraph c-caption mt-lg">请在个人中心-我的卡券查看</view> -->
|
||||
<view @tap.stop="$refs.show_coupon_succ_item.close()"
|
||||
class="confirm-btn flex-center f-paragraph c-base mt-lg radius" :style="{background: primaryColor}">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
useType: {
|
||||
is_land: '土地租赁',
|
||||
is_claim: '认养服务',
|
||||
is_shop: '商城',
|
||||
},
|
||||
param: {
|
||||
page: 1,
|
||||
},
|
||||
list: {
|
||||
data: []
|
||||
},
|
||||
loading: true,
|
||||
lockTap: false
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
userInfo: state => state.user.userInfo,
|
||||
}),
|
||||
onLoad(options) {
|
||||
this.$util.showLoading()
|
||||
this.options = options
|
||||
this.initIndex()
|
||||
},
|
||||
onUnload() {
|
||||
this.$util.back()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.param.page = 1;
|
||||
// #ifndef APP-PLUS
|
||||
uni.showNavigationBarLoading()
|
||||
// #endif
|
||||
this.initIndex();
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.list.current_page >= this.list.last_page || this.loading) return;
|
||||
this.param.page = this.param.page + 1;
|
||||
this.loading = true;
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
initIndex() {
|
||||
this.param.page = 1
|
||||
this.getList()
|
||||
},
|
||||
initRefresh() {
|
||||
this.initIndex()
|
||||
},
|
||||
async getList() {
|
||||
let {
|
||||
list: oldList,
|
||||
param,
|
||||
useType
|
||||
} = this
|
||||
let newList = await this.$api.shop.couponList(param);
|
||||
newList.data.map(item => {
|
||||
item.is_show = false
|
||||
let use_range = ''
|
||||
for (let key in useType) {
|
||||
if (item[key]) {
|
||||
use_range += `${useType[key]}、`
|
||||
}
|
||||
}
|
||||
item.use_range = use_range.substring(0, use_range.length - 1)
|
||||
})
|
||||
//page=1为刷新或者首次加载,其他为下拉加载更多
|
||||
if (this.param.page == 1) {
|
||||
this.list = newList;
|
||||
} else {
|
||||
newList.data = oldList.data.concat(newList.data)
|
||||
this.list = newList;
|
||||
}
|
||||
this.loading = false;
|
||||
this.$util.hideAll();
|
||||
},
|
||||
async toGetCoupon(index) {
|
||||
let {
|
||||
id: coupon_id
|
||||
} = this.list.data[index]
|
||||
if (this.lockTap) return
|
||||
this.lockTap = true
|
||||
this.$util.showLoading()
|
||||
try {
|
||||
await this.$api.shop.userGetCoupon({
|
||||
coupon_id
|
||||
})
|
||||
let {
|
||||
coupon_total = 0
|
||||
} = this.$util.getPage(-1).detail
|
||||
this.$util.getPage(-1).detail.coupon_total = coupon_total - 1
|
||||
this.list.data.splice(index, 1)
|
||||
this.$util.hideAll()
|
||||
this.lockTap = false
|
||||
this.$refs.show_coupon_succ_item.open()
|
||||
} catch (e) {
|
||||
setTimeout(() => {
|
||||
this.lockTap = false
|
||||
this.$util.hideAll()
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
goCoupon() {
|
||||
let url = `/mine/pages/coupon/list`
|
||||
this.$util.goUrl({
|
||||
url
|
||||
})
|
||||
this.$refs.show_coupon_succ_item.close()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.shop-coupon {
|
||||
.list-item {
|
||||
overflow: hidden;
|
||||
|
||||
.item-title {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 50rpx;
|
||||
background: #FFE2E2;
|
||||
border-radius: 15rpx 0 15rpx 0;
|
||||
}
|
||||
|
||||
.use-btn {
|
||||
min-width: 120rpx;
|
||||
height: 58rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-coupon {
|
||||
width: 600rpx;
|
||||
height: 514rpx;
|
||||
|
||||
.success-img {
|
||||
width: 201rpx;
|
||||
height: 199rpx;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 184rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
894
uniapp/uni-app/shop/pages/detail.vue
Normal file
894
uniapp/uni-app/shop/pages/detail.vue
Normal file
@@ -0,0 +1,894 @@
|
||||
<template>
|
||||
<view class="shop-detail" v-if="detail.id">
|
||||
<banner :list="detail.imgs" :margin="0" :autoplay="true" :borderRadius="0" :height="750"
|
||||
:indicatorActiveColor="primaryColor" indicatorType="number"></banner>
|
||||
|
||||
<view class="seckill-info rel mb-md"
|
||||
v-if="(currentSpecs.id && currentSpecs.kill_atv && currentSpecs.kill_atv.id) || (detail.kill_list && detail.kill_list.id)">
|
||||
<image mode="aspectFill" class="seckill-img abs" src="/static/image/shop/seckill.png">
|
||||
</image>
|
||||
<view class="seckill-btn abs flex-center f-desc text-bold radius" :style="{color:primaryColor}"
|
||||
v-if="currentSpecs.kill_atv.id ? currentSpecs.kill_atv.atv_status==1:detail.kill_list.atv_status==1">
|
||||
即将开抢</view>
|
||||
<view class="seckill-count abs" v-if="detail.kill_list.atv_status==2">
|
||||
<min-countdown :type="3" :targetTime="detail.kill_list.end_time * 1000" :color="primaryColor"
|
||||
textColor="#fff" className="sm" @callback="countEnd">
|
||||
</min-countdown>
|
||||
</view>
|
||||
<view class="seckill-content flex-between f-icontext c-base abs">
|
||||
<view>
|
||||
<view class="flex-y-center">秒杀价<view class="flex-y-baseline ml-sm">¥<view class="f-lg-title">
|
||||
{{currentSpecs.kill_atv.id ? currentSpecs.kill_atv.price : detail.kill_list.price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>即将恢复
|
||||
¥{{currentSpecs.kill_atv.id ? currentSpecs.kill_atv.init_price : detail.kill_list.init_price}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-center flex-column">
|
||||
<view class="f-caption">
|
||||
{{currentSpecs.kill_atv.id ? currentSpecs.kill_atv.stock : detail.kill_list.stock}}
|
||||
</view>
|
||||
<view>仅剩(件)</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="pd-lg fill-base">
|
||||
<view class="flex-center">
|
||||
<view class="rel flex-1">
|
||||
<view class="reduce-info abs flex-center pr-sm f-caption c-base" :style="{background:primaryColor}"
|
||||
v-if="(currentSpecs.id && currentSpecs.kill_atv && currentSpecs.kill_atv.id) || (detail.kill_list && detail.kill_list.id)">
|
||||
<view class="reduce-tag abs flex-center pr-sm f-icontext" :style="{color:primaryColor}">限时直降
|
||||
</view>
|
||||
¥{{currentSpecs.kill_atv.id ? currentSpecs.kill_atv.reduce_price : detail.kill_list.reduce_price}}
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="max-600">
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<view>
|
||||
<!-- #endif -->
|
||||
<view class="f-sm-title c-title"
|
||||
:style="{textIndent:(currentSpecs.id && currentSpecs.kill_atv&¤tSpecs.kill_atv.id) || (detail.kill_list && detail.kill_list.id) ? `${seckillWidth}px` : ''}">
|
||||
{{detail.goods_name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button open-type="share" class="clear-btn flex-center flex-column">
|
||||
<i class="iconfont icon-share c-title"></i>
|
||||
<view class="f-caption c-title">分享</view>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class="flex-between f-caption c-caption mt-sm">
|
||||
<view class="flex-y-baseline f-lg-title c-warning">
|
||||
<block v-if="currentSpecs.id">
|
||||
<view class="flex-y-baseline mt-sm" v-if="currentSpecs.integral_atv.id">
|
||||
<view class="f-title c-warning">
|
||||
{{currentSpecs.integral_atv.price*1>0?`${currentSpecs.integral_atv.integral}积分+${currentSpecs.integral_atv.price}元`:`${currentSpecs.integral_atv.integral}积分`}}
|
||||
</view>
|
||||
<view class="f-caption c-caption text-delete ml-sm">商城价 ¥{{currentSpecs.price}}
|
||||
</view>
|
||||
</view>
|
||||
<block v-else>
|
||||
¥{{currentSpecs.price}}
|
||||
<view class="f-desc c-caption text-delete ml-sm">¥{{currentSpecs.original_price}}
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
<block v-else>¥{{detail.show_price}}
|
||||
<view class="f-desc c-caption text-delete ml-sm">¥{{detail.show_init_price}}
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view>已销售：{{detail.sale_num}} </view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<block v-if="list.all_count>0">
|
||||
<view class="mt-md pt-sm pl-lg pr-lg fill-base f-paragraph c-title">
|
||||
<view class="common-nav-title flex-center c-title">
|
||||
<view class="common-line" :style="{background:primaryColor}"></view>
|
||||
<view class="flex-1 flex-between">
|
||||
<view class="f-title text-bold">评价（{{list.all_count}}）</view>
|
||||
<view @tap.stop="$util.goUrl({url:`/mine/pages/evaluate/more?id=${options.id}&type=3`})"
|
||||
class="flex-y-center f-paragraph c-caption">
|
||||
<view>查看全部</view>
|
||||
<i class="iconfont icon-right" style="font-size: 28rpx;"></i>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<block v-for="(item,index) in list.data" :key="index">
|
||||
<view class="flex-warp fill-base pd-lg" :class="[{'b-1px-t':index!=0}]" v-if="index<2">
|
||||
<image mode="aspectFill" lazy-load class="avatar sm radius" :src="item.user_info.avatarUrl">
|
||||
</image>
|
||||
<view class="flex-1 ml-lg">
|
||||
<view class="flex-between">
|
||||
<view class="f-paragraph c-title max-350 ellipsis">{{item.user_info.nickName}}</view>
|
||||
<view class="f-icontext c-caption">{{item.create_time}}</view>
|
||||
</view>
|
||||
<view class="flex-warp">
|
||||
<i class="iconfont icon-star-fill icon-font-color mr-sm"
|
||||
:style="{backgroundImage: aindex < item.star ? '-webkit-linear-gradient(90deg, #FDCD47, #FFC000)' : '-webkit-linear-gradient(90deg, #eee, #eee)'}"
|
||||
v-for="(aitem,aindex) in 5" :key="aindex"></i>
|
||||
</view>
|
||||
<view class="f-caption c-desc mt-md">
|
||||
<text decode="emsp" style="word-break:break-all;">{{item.text || '该用户没有填写评价哦'}}</text>
|
||||
</view>
|
||||
<view class="flex-warp mt-md" v-if="item.imgs && item.imgs.length > 0">
|
||||
<block v-for="(aitem,aindex) in item.imgs" :key="aindex">
|
||||
<view class="eva-img sm radius-10 rel" v-if="aindex < 3">
|
||||
<image @tap.stop="toPreviewImage(index,aindex)" mode="aspectFill"
|
||||
class="eva-img sm radius-10" :src="aitem">
|
||||
</image>
|
||||
<view class="more f-caption c-base abs"
|
||||
v-if="aindex == 2 && item.imgs.length > 3">
|
||||
+{{item.imgs.length - 3}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
|
||||
<view @tap="$util.goUrl({url:`/shop/pages/store?id=${detail.store_info.id}`})"
|
||||
class="store-info flex-center mt-md pd-lg fill-base f-paragraph c-title">
|
||||
<image mode="aspectFill" class="cover" :src="detail.store_info.cover"></image>
|
||||
<view class="flex-1 flex-between ml-md">
|
||||
<view>
|
||||
<view class="flex-y-center mb-sm">
|
||||
<view class="f-sm-title text-bold ellipsis"
|
||||
:class="[{'max-300':detail.store_info.is_admin},{'max-400':!detail.store_info.is_admin}]">
|
||||
{{detail.store_info.title}}
|
||||
</view>
|
||||
<view class="store-tag flex-center ml-sm f-icontext" v-if="detail.store_info.is_admin">平台直营
|
||||
</view>
|
||||
</view>
|
||||
<view class="star-fill-info rel">
|
||||
<view class="flex-warp star rel">
|
||||
<view class="item-star flex-center" v-for="(aitem,aindex) in 5" :key="aindex">
|
||||
<i class="iconfont icon-star-bold-fill"></i>
|
||||
</view>
|
||||
</view>
|
||||
<view class="star-fill abs" :style="{width: detail.store_info.star_percent}">
|
||||
<view class="flex-warp">
|
||||
<view class="item-star flex-center" v-for="(aitem,aindex) in 5" :key="aindex">
|
||||
<i class="iconfont icon-star-bold-fill icon-font-color"
|
||||
:style="{backgroundImage: '-webkit-linear-gradient(90deg, #FDCD47, #FFC000)'}"></i>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="go-btn flex-center f-paragraph"
|
||||
:style="{color:primaryColor,border:`1px solid ${primaryColor}`}">进店逛逛
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-md pt-sm pl-lg pr-lg pb-lg fill-base f-paragraph c-title" v-if="detail.text">
|
||||
<view class="common-nav-title flex-center c-title">
|
||||
<view class="common-line" :style="{background:primaryColor}"></view>
|
||||
<view class="f-title text-bold flex-1">商品详情</view>
|
||||
</view>
|
||||
<view class="pt-sm" v-if="detail.text">
|
||||
<parser :html="detail.text" @linkpress="linkpress" show-with-animation lazy-load>加载中...</parser>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="space-max-footer"></view>
|
||||
<view class="footer-btn fill-base fix">
|
||||
<view class="footer-item flex-between pr-lg">
|
||||
<view class="flex-warp f-caption c-title">
|
||||
<view @tap.stop="$util.goUrl({url:`/pages/home`,openType:`switchTab`})"
|
||||
class="flex-center flex-column pl-lg pr-lg">
|
||||
<i class="iconfont icon-home"></i>
|
||||
<view>首页</view>
|
||||
</view>
|
||||
<view @tap.stop="$util.goUrl({url:`/shop/pages/car`})"
|
||||
class="flex-center flex-column pl-md rel">
|
||||
<view v-if="shopCarList.car_count" class="car-count flex-center c-base f-icontext abs"
|
||||
:style="{width: shopCarList.car_count<10 ? '30rpx' : '50rpx'}">
|
||||
{{shopCarList.car_count < 100 ? shopCarList.car_count : '99+'}}
|
||||
</view>
|
||||
<i class="iconfont icon-gouwuche"></i>
|
||||
<view>购物车</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-warp">
|
||||
<block v-if="detail.kill_list && detail.kill_list.id"></block>
|
||||
<view @tap.stop="toAddOrder(1)" class="order-btn flex-center f-title c-base text-bold radius"
|
||||
:style="{color:primaryColor,border:`1rpx solid ${primaryColor}`}" v-else>
|
||||
加入购物车
|
||||
</view>
|
||||
<view
|
||||
@tap.stop="toAddOrder(detail.kill_list && detail.kill_list.id && detail.kill_list.atv_status == 2 ? 3 : currentSpecs.id && currentSpecs.integral_atv&¤tSpecs.integral_atv.id ? 4 :2)"
|
||||
class="order-btn flex-center ml-md f-title c-base text-bold radius"
|
||||
:style="{background:primaryColor,border:`1rpx solid ${primaryColor}`}">
|
||||
<block v-if="detail.kill_list&&detail.kill_list.id&& detail.kill_list.atv_status == 2">立即抢购
|
||||
</block>
|
||||
<block
|
||||
v-else-if="currentSpecs.id && currentSpecs.integral_atv&¤tSpecs.integral_atv.id">
|
||||
积分兑换</block>
|
||||
<block v-else>立即购买</block>
|
||||
|
||||
<!-- {{detail.kill_list&&detail.kill_list.id&& detail.kill_list.atv_status == 2?'立即抢购':currentSpecs.id && currentSpecs.integral_atv&¤tSpecs.integral_atv.id?'积分兑换':'立即购买'}} -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="space-safe"></view>
|
||||
</view>
|
||||
|
||||
<uni-popup ref="show_spe_item" type="bottom">
|
||||
<view @touchmove.stop.prevent class="popup-choose-spe f-paragraph c-desc fill-base radius-top-34">
|
||||
<i @tap.stop="$refs.show_spe_item.close()" class="iconfont icon-close c-title abs"></i>
|
||||
<view class="space-lg"></view>
|
||||
<view class="flex-center pd-lg">
|
||||
<image mode="aspectFill" class="avatar radius-16" :src="speImg || detail.cover"></image>
|
||||
<view class="flex-1 ml-lg f-desc c-warning">
|
||||
<view :class="[{'flex-y-baseline':currentSpecs.integral_atv.price*1==0}]"
|
||||
v-if="currentSpecs.id && (currentSpecs.kill_atv&¤tSpecs.kill_atv.id || currentSpecs.integral_atv&¤tSpecs.integral_atv.id)">
|
||||
<view class="flex-y-center c-warning" v-if="currentSpecs.kill_atv.id">
|
||||
秒杀价<view class="flex-y-baseline ml-sm">¥<view class="f-lg-title">
|
||||
{{currentSpecs.kill_atv.price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="f-title c-warning" v-else>
|
||||
{{currentSpecs.integral_atv.price*1>0?`${currentSpecs.integral_atv.integral}积分+${currentSpecs.integral_atv.price}元`:`${currentSpecs.integral_atv.integral}积分`}}
|
||||
</view>
|
||||
<view class="f-caption c-caption"
|
||||
:class="[{'ml-sm text-delete':currentSpecs.integral_atv.price*1==0}]">
|
||||
商城价 ¥{{currentSpecs.price}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-y-baseline" v-else>
|
||||
¥<view class="f-lg-title">{{currentSpecs.id ?currentSpecs.price:detail.show_price}}
|
||||
</view>
|
||||
<view class="c-caption text-delete ml-sm">
|
||||
¥{{currentSpecs.id ?currentSpecs.original_price:detail.show_init_price}} </view>
|
||||
</view>
|
||||
<view class="f-caption c-title mt-sm">库存：{{currentSpecs.id ? currentSpecs.stock : 0}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-y class="spe-list">
|
||||
<view class="pd-lg" :class="[{'b-1px-t':index!=0}]" v-for="(item,index) in detail.spe_text"
|
||||
:key="index">
|
||||
<view class="f-desc c-title text-bold">{{item.title}}</view>
|
||||
<view class="flex-warp">
|
||||
<view @tap.stop="skuClick(aitem, index, aindex)"
|
||||
class="spe-item flex-center f-icontext c-title mt-md mb-sm mr-lg"
|
||||
:style="{borderColor:!aitem.is_show ? '#999' : subIndex[index] == aindex?primaryColor:'',background:!aitem.is_show ? '#999' : subIndex[index] == aindex?'#EFEFFF':'',color:!aitem.is_show ? '#fff' :subIndex[index] == aindex?primaryColor:''}"
|
||||
v-for="(aitem,aindex) in item.cate" :key="aindex">
|
||||
<image mode="aspectFill" class="spe-img mr-sm radius-4" :src="aitem.image"
|
||||
v-if="aitem.is_img === 1 && aitem.image"></image>
|
||||
<view style="max-width: 510rpx;">{{aitem.title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="flex-between pd-lg b-1px-t">
|
||||
<view class="f-desc c-title">购买数量</view>
|
||||
<view class="add-remove-item flex-center">
|
||||
<block v-if="currentNum">
|
||||
<i @tap.stop="changeNum(-1)" class="iconfont icon-remove-circle c-caption"></i>
|
||||
<view class="number flex-center f-desc pl-sm pr-sm">{{currentNum}}</view>
|
||||
</block>
|
||||
<i @tap.stop="changeNum(1)" class="iconfont icon-add-circle"
|
||||
:style="{color:primaryColor}"></i>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-center pd-lg">
|
||||
<view @tap="toAddCar" class="confirm-btn flex-center f-sm-title c-base radius"
|
||||
:style="{background:primaryColor}">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
<view class="space-safe"></view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions
|
||||
} from "vuex"
|
||||
import parser from "@/components/jyf-Parser/index"
|
||||
export default {
|
||||
components: {
|
||||
parser
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
detail: {},
|
||||
speImg: '',
|
||||
videoContexts: {},
|
||||
shopItemInfo: {}, //存放要和选中的值进行匹配的数据
|
||||
selectArr: [], //存放被选中的值
|
||||
subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
|
||||
currentSpecs: {}, //存放最后选中的商品
|
||||
currentNum: 1, //选中数量
|
||||
totalPrice: 0,
|
||||
seckillWidth: 119,
|
||||
param: {
|
||||
page: 1,
|
||||
limit: 10
|
||||
},
|
||||
list: {
|
||||
data: []
|
||||
},
|
||||
add_order_type: 1
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
userInfo: state => state.user.userInfo,
|
||||
shopCarList: state => state.order.shopCarList
|
||||
}),
|
||||
onLoad(options) {
|
||||
this.$util.showLoading()
|
||||
this.options = options
|
||||
this.initIndex()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.showNavigationBarLoading()
|
||||
// #endif
|
||||
this.initRefresh()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
onShareAppMessage(e) {
|
||||
let {
|
||||
id: pid
|
||||
} = this.userInfo
|
||||
let {
|
||||
id,
|
||||
goods_name: title,
|
||||
cover: imageUrl
|
||||
} = this.detail
|
||||
let path = `/shop/pages/detail?pid=${pid}&id=${id}`
|
||||
this.$util.log(path)
|
||||
return {
|
||||
title,
|
||||
imageUrl,
|
||||
path,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getConfigInfo', 'getShopCarList']),
|
||||
async initIndex() {
|
||||
await Promise.all([this.getDetail(), this.getList()])
|
||||
},
|
||||
initRefresh() {
|
||||
this.initIndex()
|
||||
},
|
||||
countEnd() {
|
||||
this.$util.log("倒计时完了")
|
||||
setTimeout(() => {
|
||||
this.initRefresh()
|
||||
}, 1000)
|
||||
},
|
||||
linkpress(res) {
|
||||
console.log("linkpress", res);
|
||||
// #ifdef APP-PLUS
|
||||
this.$util.goUrl({
|
||||
url: res.href,
|
||||
openType: 'web'
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
async getDetail() {
|
||||
let {
|
||||
id
|
||||
} = this.options
|
||||
let data = await this.$api.shop.goodsInfo({
|
||||
id
|
||||
});
|
||||
data.spe_price.map(item => {
|
||||
item.is_show = true
|
||||
if (item.kill_atv && item.kill_atv.id) {
|
||||
let {
|
||||
price,
|
||||
init_price
|
||||
} = item.kill_atv
|
||||
item.kill_atv.reduce_price = init_price * 1 - price * 1
|
||||
}
|
||||
})
|
||||
data.spe_text.map(item => {
|
||||
if (item.cate.length < 1) return
|
||||
this.selectArr.push('');
|
||||
this.subIndex.push(-1);
|
||||
});
|
||||
if (data.kill_list && data.kill_list.id) {
|
||||
let {
|
||||
price,
|
||||
init_price
|
||||
} = data.kill_list
|
||||
data.kill_list.reduce_price = init_price * 1 - price * 1
|
||||
}
|
||||
data.store_info.star_percent = (data.store_info.star * 1 / 5 * 100).toFixed(2) + '%'
|
||||
this.detail = data
|
||||
this.speImg = ''
|
||||
this.shopItemInfo = {}
|
||||
this.selectArr = []
|
||||
this.subIndex = []
|
||||
this.currentSpecs = {}
|
||||
this.checkItem(); //计算sku里面规格形成路径
|
||||
this.checkInpath(-1); //传-1是为了不跳过循环
|
||||
setTimeout(() => {
|
||||
this.toSetResHeight()
|
||||
}, 100)
|
||||
if (this.shopItemInfo.length < 1) return
|
||||
let curr_spe = this.shopItemInfo[Object.keys(this.shopItemInfo)[0]]
|
||||
if (!curr_spe) {
|
||||
this.$util.hideAll()
|
||||
return
|
||||
}
|
||||
this.currentSpecs = curr_spe
|
||||
this.selectArr = curr_spe.spe_array_text
|
||||
this.detail.spe_text.forEach((bitem, bindex) => {
|
||||
if (bitem.cate.length < 1) return
|
||||
bitem.cate.forEach((citem, cindex) => {
|
||||
curr_spe.spe_array_text.forEach((ditem, dindex) => {
|
||||
if (ditem == citem.id) {
|
||||
if (citem.is_img == 1) {
|
||||
this.speImg = citem.image
|
||||
}
|
||||
this.subIndex[dindex] = cindex
|
||||
this.checkInpath(bindex)
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
this.$util.hideAll()
|
||||
},
|
||||
async toSetResHeight() {
|
||||
let {
|
||||
kill_list = {}
|
||||
} = this.detail
|
||||
let {
|
||||
currentSpecs = {}
|
||||
} = this
|
||||
if ((currentSpecs && currentSpecs.id && currentSpecs.kill_atv && currentSpecs.kill_atv.id) || (
|
||||
kill_list && kill_list.id)) {
|
||||
this.seckillWidth = 119
|
||||
const query = uni.createSelectorQuery();
|
||||
query.select('.reduce-info').boundingClientRect(data => {
|
||||
console.log(data, "=====data")
|
||||
this.seckillWidth = data.width + 5
|
||||
}).exec();
|
||||
} else {
|
||||
this.seckillWidth = 0
|
||||
}
|
||||
},
|
||||
async getList() {
|
||||
let {
|
||||
list: oldList,
|
||||
} = this
|
||||
let {
|
||||
id: goods_id,
|
||||
} = this.options
|
||||
let param = Object.assign({}, this.param, {
|
||||
goods_id,
|
||||
type: 3,
|
||||
is_goods: 0
|
||||
});
|
||||
let newList = await this.$api.mine.goodsEvaluateList(param);
|
||||
if (this.param.page == 1) {
|
||||
this.list = newList
|
||||
} else {
|
||||
newList.data = oldList.data.concat(newList.data)
|
||||
this.list = newList
|
||||
}
|
||||
this.loading = false
|
||||
this.$util.hideAll()
|
||||
},
|
||||
playCurrent(current) {
|
||||
let {
|
||||
current: preCurrent
|
||||
} = this
|
||||
this.current = current
|
||||
for (let key in this.videoContexts) {
|
||||
if (key != current) {
|
||||
this.videoContexts[key].pause()
|
||||
this.text[key].is_play = false
|
||||
} else if (current == preCurrent) {
|
||||
let {
|
||||
is_play
|
||||
} = this.text[key]
|
||||
if (is_play) {
|
||||
this.videoContexts[key].pause()
|
||||
} else {
|
||||
this.videoContexts[key].play()
|
||||
}
|
||||
this.text[key].is_play = is_play ? false : true
|
||||
} else {
|
||||
this.videoContexts[key].play()
|
||||
this.text[key].is_play = true
|
||||
}
|
||||
}
|
||||
},
|
||||
onPlay(e) {},
|
||||
onPause(e) {},
|
||||
onEnded(e) {
|
||||
let {
|
||||
index
|
||||
} = this.$util.getDataSet(e)
|
||||
this.detail.text[index].is_play = false
|
||||
},
|
||||
onError(e) {},
|
||||
onTimeUpdate(e) {},
|
||||
onWaiting(e) {},
|
||||
onProgress(e) {},
|
||||
onLoadedMetaData(e) {},
|
||||
toPreviewImage(index, aindex) {
|
||||
let {
|
||||
imgs: urls
|
||||
} = this.list.data[index]
|
||||
this.$util.previewImage({
|
||||
current: urls[aindex],
|
||||
urls
|
||||
})
|
||||
},
|
||||
skuClick(citem, index, cindex) {
|
||||
if (!citem.is_show) return
|
||||
let isCheck = this.selectArr[index] != citem.id
|
||||
this.$set(this.selectArr, index, isCheck ? citem.id : '')
|
||||
this.$set(this.subIndex, index, isCheck ? cindex : '-1')
|
||||
if (citem.is_img == 1) {
|
||||
this.speImg = isCheck ? citem.image : ''
|
||||
}
|
||||
this.checkInpath(index);
|
||||
this.countBuy()
|
||||
setTimeout(() => {
|
||||
this.toSetResHeight()
|
||||
}, 10)
|
||||
},
|
||||
//循环所有属性判断哪些属性可选（当前选中的兄弟节点和已选中属性不需要循环 ）
|
||||
checkInpath(clickIndex) {
|
||||
for (let i = 0, len = this.detail.spe_text.length; i < len; i++) {
|
||||
if (i == clickIndex) {
|
||||
continue;
|
||||
}
|
||||
let len2 = this.detail.spe_text[i].cate.length;
|
||||
for (let j = 0; j < len2; j++) {
|
||||
if (this.subIndex[i] != -1 && j == this.subIndex[i]) {
|
||||
continue;
|
||||
}
|
||||
let choosed_copy = [...this.selectArr];
|
||||
this.$set(choosed_copy, i, this.detail.spe_text[i].cate[j].id);
|
||||
let choosed_copy2 = choosed_copy.filter(item => item !== '' && typeof item !== 'undefined');
|
||||
if (this.shopItemInfo.hasOwnProperty(choosed_copy2)) {
|
||||
this.$set(this.detail.spe_text[i].cate[j], 'is_show', true);
|
||||
} else {
|
||||
this.$set(this.detail.spe_text[i].cate[j], 'is_show', false);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
//计算可选路径
|
||||
checkItem() {
|
||||
let arrList = []
|
||||
this.detail.spe_price.forEach(item => {
|
||||
if (!item.is_show) return
|
||||
if (item.stock < 1) return
|
||||
arrList.push(item)
|
||||
})
|
||||
let result = arrList.reduce(
|
||||
(arrs, items) => {
|
||||
return arrs.concat(
|
||||
items.spe_array_text.reduce(
|
||||
(arr, item) => {
|
||||
return arr.concat(
|
||||
arr.map(item2 => {
|
||||
//利用对象属性的唯一性实现二维数组去重
|
||||
if (!this.shopItemInfo.hasOwnProperty([...item2, item])) {
|
||||
this.shopItemInfo[[...item2, item]] = items;
|
||||
}
|
||||
return [...item2, item];
|
||||
})
|
||||
);
|
||||
},
|
||||
[
|
||||
[]
|
||||
]
|
||||
)
|
||||
);
|
||||
},
|
||||
[
|
||||
[]
|
||||
]
|
||||
);
|
||||
},
|
||||
async countBuy() {
|
||||
//如果全部选完
|
||||
let isCheckAllSpec = this.selectArr.every(item => item != '')
|
||||
this.currentSpecs = isCheckAllSpec ? this.shopItemInfo[this.selectArr] : {}
|
||||
this.currentNum = 0
|
||||
if (this.currentSpecs.stock >= 1) {
|
||||
this.currentNum = 1
|
||||
}
|
||||
let {
|
||||
id = 0, price
|
||||
} = this.currentSpecs
|
||||
this.totalPrice = id ? (price * this.currentNum).toFixed(2) : 0
|
||||
},
|
||||
toAddOrder(type) {
|
||||
this.add_order_type = type
|
||||
this.$refs.show_spe_item.open()
|
||||
},
|
||||
// 加减数量
|
||||
async changeNum(mol) {
|
||||
let spe_price_id = this.currentSpecs.id;
|
||||
if (!spe_price_id) {
|
||||
this.$util.showToast({
|
||||
title: '请选择规格'
|
||||
})
|
||||
return
|
||||
}
|
||||
let num = (this.currentNum + mol) * 1;
|
||||
if (num < 1) {
|
||||
this.$util.showToast({
|
||||
title: `此商品最少购买1件`
|
||||
})
|
||||
return;
|
||||
}
|
||||
let stock = this.currentSpecs.stock * 1
|
||||
if (num > stock) {
|
||||
this.$util.showToast({
|
||||
title: "数量不能大于库存"
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
this.currentNum = num;
|
||||
let {
|
||||
id = 0, price
|
||||
} = this.currentSpecs
|
||||
let total_wholesale_price = this.cur_wholesale.id ? this.cur_wholesale.total_price * 1 : 0
|
||||
this.totalPrice = id ? (price * this.currentNum).toFixed(2) : 0
|
||||
},
|
||||
//加入购物车
|
||||
async toAddCar() {
|
||||
let {
|
||||
add_order_type
|
||||
} = this
|
||||
let is_show = JSON.parse(JSON.stringify(add_order_type))
|
||||
is_show = is_show === 1 ? 1 : 2
|
||||
let {
|
||||
id: goods_id,
|
||||
store,
|
||||
} = this.detail;
|
||||
let store_id = store[0]
|
||||
let {
|
||||
id: spe_id,
|
||||
integral_atv = {}
|
||||
} = this.currentSpecs;
|
||||
if (!spe_id) {
|
||||
this.$util.showToast({
|
||||
title: '请选择规格'
|
||||
})
|
||||
return
|
||||
}
|
||||
let {
|
||||
currentNum: goods_num,
|
||||
} = this
|
||||
let {
|
||||
stock
|
||||
} = this.currentSpecs
|
||||
if (goods_num < 1) {
|
||||
this.$util.showToast({
|
||||
title: `此商品最少购买1件`
|
||||
})
|
||||
return;
|
||||
}
|
||||
if (goods_num > stock * 1) {
|
||||
this.$util.showToast({
|
||||
title: `数量不能大于库存`
|
||||
})
|
||||
return;
|
||||
}
|
||||
this.$util.showLoading();
|
||||
let param = {
|
||||
store_id,
|
||||
goods_id,
|
||||
spe_id,
|
||||
goods_num,
|
||||
is_show
|
||||
}
|
||||
await this.$api.shop.addCar(param)
|
||||
this.$util.hideAll()
|
||||
if (is_show == 1) {
|
||||
this.$util.showToast({
|
||||
title: "加入成功"
|
||||
})
|
||||
await this.getShopCarList()
|
||||
} else {
|
||||
this.$refs.show_spe_item.close()
|
||||
let url = `/shop/pages/order?is_show=2`
|
||||
if (integral_atv.id && add_order_type === 4) {
|
||||
url = `${url}&no_i=0`
|
||||
}
|
||||
this.$util.goUrl({
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.shop-detail {
|
||||
.seckill-info {
|
||||
width: 100%;
|
||||
height: 143rpx;
|
||||
|
||||
.seckill-img {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 156rpx;
|
||||
}
|
||||
|
||||
.seckill-btn {
|
||||
left: 58rpx;
|
||||
bottom: 22rpx;
|
||||
width: 152rpx;
|
||||
height: 56rpx;
|
||||
background: #FFFB00;
|
||||
}
|
||||
|
||||
.seckill-count {
|
||||
left: 38rpx;
|
||||
bottom: 30rpx;
|
||||
}
|
||||
|
||||
.seckill-content {
|
||||
left: 298rpx;
|
||||
top: 0;
|
||||
width: 420rpx;
|
||||
height: 140rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.f-lg-title {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.icon-share {
|
||||
font-size: 42rpx;
|
||||
}
|
||||
|
||||
.count-list {
|
||||
.count-item {
|
||||
width: 249rpx;
|
||||
|
||||
.ellipsis {
|
||||
max-width: 220rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 1rpx;
|
||||
height: 58rpx;
|
||||
background: #CCCCCC;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.store-info {
|
||||
.cover {
|
||||
width: 98rpx;
|
||||
height: 98rpx;
|
||||
border-radius: 12rpx
|
||||
}
|
||||
|
||||
.store-tag {
|
||||
width: 96rpx;
|
||||
height: 29rpx;
|
||||
color: #39b54a;
|
||||
background: rgba(0, 146, 84, 0.1);
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
|
||||
.go-btn {
|
||||
width: 139rpx;
|
||||
height: 54rpx;
|
||||
border-radius: 4rpx;
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.goods-img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.goods-video {
|
||||
width: 100%;
|
||||
height: 450rpx;
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
bottom: 0;
|
||||
|
||||
.footer-item {
|
||||
height: 114rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.car-count {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
border-radius: 15rpx;
|
||||
background: #f12c20;
|
||||
top: -10rpx;
|
||||
right: -10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.order-btn {
|
||||
width: 220rpx;
|
||||
height: 78rpx;
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.popup-choose-spe {
|
||||
width: 100%;
|
||||
|
||||
.icon-close {
|
||||
font-size: 50rpx;
|
||||
top: 32rpx;
|
||||
right: 32rpx;
|
||||
}
|
||||
|
||||
.spe-list {
|
||||
max-height: 55vh;
|
||||
overflow: auto;
|
||||
|
||||
.spe-item {
|
||||
min-width: 98rpx;
|
||||
min-height: 38rpx;
|
||||
padding: 10rpx 15rpx;
|
||||
background: #F6F6F6;
|
||||
border-radius: 12rpx;
|
||||
border: 1rpx solid #F6F6F6;
|
||||
transform: rotateZ(360deg);
|
||||
|
||||
.spe-img {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.spe-item.cur {
|
||||
background: #EFEFFF;
|
||||
border: 1rpx solid #393A81;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 500rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
149
uniapp/uni-app/shop/pages/hot-goods.vue
Normal file
149
uniapp/uni-app/shop/pages/hot-goods.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<view class="shop-hot-goods">
|
||||
|
||||
<fixed>
|
||||
<view class="fill-base pt-big pb-big pl-md pr-md">
|
||||
<search @input="toSearch" type="input" :padding="0" :radius="70" placeholder="搜索商品名称"></search>
|
||||
</view>
|
||||
</fixed>
|
||||
|
||||
<block v-for="(item,index) in list.data" :key="index">
|
||||
<view @tap.stop="goDetail(index)"
|
||||
class="goods-item flex-center mt-md ml-md mr-md pd-lg fill-base radius-16">
|
||||
<image mode="aspectFill" lazy-load class="cover radius-16" :src="item.cover"></image>
|
||||
<view class="flex-1 ml-lg">
|
||||
<view class="flex-center">
|
||||
<view class="flex-1">
|
||||
<view class="f-title c-title text-bold mt-sm mb-sm ellipsis">{{item.goods_name}}
|
||||
</view>
|
||||
<view class="flex-y-baseline f-caption c-warning">¥<view class="f-lg-title">
|
||||
{{item.show_price}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="f-caption c-caption text-delete">¥{{item.show_init_price}}</view>
|
||||
</view>
|
||||
<image lazy-load class="add-car-img" src="/static/image/shop/add-car.png">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
|
||||
</load-more>
|
||||
<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
|
||||
<view class="space-footer"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions,
|
||||
mapMutations
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
param: {
|
||||
page: 1,
|
||||
},
|
||||
list: {
|
||||
data: []
|
||||
},
|
||||
loading: true,
|
||||
lockTap: false,
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
userInfo: state => state.user.userInfo,
|
||||
}),
|
||||
async onLoad(options) {
|
||||
let {
|
||||
type = 1
|
||||
} = options
|
||||
this.$util.showLoading()
|
||||
this.options = options
|
||||
await this.initIndex()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.showNavigationBarLoading()
|
||||
// #endif
|
||||
this.initRefresh()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.list.current_page >= this.list.last_page || this.loading) return
|
||||
this.param.page = this.param.page + 1
|
||||
this.loading = true
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getConfigInfo']),
|
||||
...mapMutations(['updateUserItem']),
|
||||
async initIndex() {
|
||||
this.getList()
|
||||
},
|
||||
initRefresh() {
|
||||
this.param.page = 1
|
||||
this.initIndex()
|
||||
},
|
||||
toSearch(val) {
|
||||
this.loading = true
|
||||
this.param.page = 1
|
||||
this.param.goods_name = val
|
||||
this.getList()
|
||||
},
|
||||
async getList() {
|
||||
let {
|
||||
list: oldList,
|
||||
param,
|
||||
} = this
|
||||
let newList = await this.$api.shop.hotGoodsList(param)
|
||||
if (this.param.page == 1) {
|
||||
this.list = newList
|
||||
} else {
|
||||
newList.data = oldList.data.concat(newList.data)
|
||||
this.list = newList
|
||||
}
|
||||
this.loading = false
|
||||
this.$util.hideAll()
|
||||
},
|
||||
async goDetail(index) {
|
||||
let {
|
||||
id
|
||||
} = this.list.data[index]
|
||||
let url = `/shop/pages/detail?id=${id}`
|
||||
this.$util.goUrl({
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.shop-hot-goods {
|
||||
.goods-item {
|
||||
.cover {
|
||||
width: 180rpx;
|
||||
height: 170rpx;
|
||||
}
|
||||
|
||||
.add-car-img {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
max-width: 370rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
230
uniapp/uni-app/shop/pages/integral/list.vue
Normal file
230
uniapp/uni-app/shop/pages/integral/list.vue
Normal file
@@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<view class="shop-integral-list" v-if="detail.id">
|
||||
<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" color="#fff"
|
||||
:backgroundColor="color == '#ffffff' ?``:primaryColor" leftIcon="icon-left" title="积分商城">
|
||||
</uni-nav-bar>
|
||||
<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
|
||||
<view mode="aspectFill" lazy-load class="mine-index-bg abs"></view>
|
||||
<view class="pt-md pl-lg pr-lg pb-lg flex-center">
|
||||
<image mode="aspectFill" lazy-load class="user-img radius" :src="userInfo.avatarUrl"
|
||||
v-if="userInfo.avatarUrl">
|
||||
</image>
|
||||
<image mode="aspectFill" lazy-load class="avatar radius" src="/static/image/mine/default-user.png" v-else>
|
||||
</image>
|
||||
<view class="flex-1 flex-center ml-md c-base">
|
||||
<view class="flex-1">
|
||||
<view class="f-lg-title text-bold max-350 ellipsis">
|
||||
Hi，{{ userInfo.nickName || `用户${userInfo.id}` }}
|
||||
</view>
|
||||
<view class="f-caption">每日签到可获得{{detail.signin_integral}}积分</view>
|
||||
</view>
|
||||
<view @tap="$util.goUrl({url:`/shop/pages/integral/record`})" class="flex-center flex-column">
|
||||
<image lazy-load class="integral-img" src="/static/image/shop/integral.png"></image>
|
||||
<view class="flex-y-baseline f-icontext mb-sm">
|
||||
<view class="f-paragraph">{{detail.integral}}</view>积分
|
||||
</view>
|
||||
<view class="exchange-btn flex-center f-icontext radius" :style="{background:primaryColor}">兑换记录
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pd-lg" style="border-radius: 40rpx;">
|
||||
<search @input="toSearch" type="input" :padding="0" :radius="70" placeholder="搜索商品名称"></search>
|
||||
</view>
|
||||
<view class="mt-md mt-md ml-md pb-md fill-base radius-16" style="width:710rpx;overflow: hidden;">
|
||||
<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex" :activeColor="primaryColor"
|
||||
width="50%" height="100rpx" color="#C5C5C5" fontSize="32rpx"></tab>
|
||||
</view>
|
||||
<block v-for="(item,index) in list.data" :key="index">
|
||||
<view @tap.stop="goDetail(index)" class="goods-item mt-md ml-md mr-md fill-base radius-16">
|
||||
<view class="flex-center pd-lg">
|
||||
<image mode="aspectFill" lazy-load class="cover radius-16" :src="item.cover"></image>
|
||||
<view class="flex-1 ml-lg">
|
||||
<view class="flex-1">
|
||||
<view class="f-title c-title text-bold mt-sm mb-sm ellipsis">{{item.goods_name}}
|
||||
</view>
|
||||
<view class="flex-y-baseline f-title c-warning mb-sm">
|
||||
{{item.price*1>0?`${item.integral}积分 + ${item.price}元`:`${item.integral}积分`}}
|
||||
</view>
|
||||
<view class="f-caption c-caption text-delete">¥{{item.init_price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ml-lg mr-lg b-1px-b"></view>
|
||||
<view class="flex-between pd-lg">
|
||||
<view class="f-caption c-caption">已换购 {{item.all_have_stock}}</view>
|
||||
<view class="common-btn flex-center f-paragraph c-base radius" :style="{background:primaryColor}">
|
||||
立即兑换</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
|
||||
</load-more>
|
||||
<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
|
||||
<view class="space-footer"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions,
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
color: '#ffffff',
|
||||
activeIndex: 0,
|
||||
tabList: [{
|
||||
id: 1,
|
||||
title: '会员积分商品'
|
||||
}, {
|
||||
id: 2,
|
||||
title: '非会员积分商品',
|
||||
number: 0
|
||||
}],
|
||||
detail: {},
|
||||
param: {
|
||||
page: 1,
|
||||
},
|
||||
list: {
|
||||
data: []
|
||||
},
|
||||
loading: true,
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
userInfo: state => state.user.userInfo,
|
||||
mineInfo: state => state.user.mineInfo,
|
||||
}),
|
||||
onLoad() {
|
||||
this.$util.showLoading()
|
||||
this.initIndex()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.showNavigationBarLoading()
|
||||
// #endif
|
||||
this.initRefresh()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.list.current_page >= this.list.last_page || this.loading) return
|
||||
this.param.page = this.param.page + 1
|
||||
this.loading = true
|
||||
this.getList()
|
||||
},
|
||||
onPageScroll(e) {
|
||||
let color = e.scrollTop < 20 ? '#ffffff' : '#000000'
|
||||
if (this.color == color) return
|
||||
this.color = color
|
||||
this.$util.setNavigationBarColor({
|
||||
color,
|
||||
bg: 'none'
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getUserInfo', 'getAuthUserProfile']),
|
||||
async initIndex() {
|
||||
let [detail] = await Promise.all([this.$api.shop.userInfo(), this
|
||||
.getList()
|
||||
])
|
||||
detail.id = 1
|
||||
this.detail = detail
|
||||
this.$util.hideAll()
|
||||
},
|
||||
initRefresh() {
|
||||
this.initIndex()
|
||||
},
|
||||
handerTabChange(index) {
|
||||
this.activeIndex = index
|
||||
this.$util.showLoading()
|
||||
this.param.page = 1
|
||||
this.list.data = []
|
||||
this.getList()
|
||||
},
|
||||
toSearch(val) {
|
||||
this.loading = true
|
||||
this.param.page = 1
|
||||
this.param.goods_name = val
|
||||
this.getList()
|
||||
},
|
||||
async getList() {
|
||||
let {
|
||||
list: oldList,
|
||||
param,
|
||||
tabList,
|
||||
activeIndex
|
||||
} = this
|
||||
param.type = tabList[activeIndex].id
|
||||
let newList = await this.$api.shop.integralGoodsList(param);
|
||||
if (this.param.page == 1) {
|
||||
this.list = newList
|
||||
} else {
|
||||
newList.data = oldList.data.concat(newList.data)
|
||||
this.list = newList
|
||||
}
|
||||
this.loading = false
|
||||
this.$util.hideAll()
|
||||
},
|
||||
goDetail(index) {
|
||||
let {
|
||||
goods_id: id
|
||||
} = this.list.data[index]
|
||||
this.$util.goUrl({
|
||||
url: `/shop/pages/detail?id=${id}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.shop-integral-list {
|
||||
|
||||
.user-img {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
line-height: 1rpx;
|
||||
overflow: hidden;
|
||||
border: 4rpx solid #EFF3FD;
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
|
||||
.integral-img {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
|
||||
.exchange-btn {
|
||||
width: 132rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.mine-index-bg {
|
||||
background: rgb(57, 181, 74);
|
||||
height: 14.425rem;
|
||||
width: 140%;
|
||||
left: -20%;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
.cover {
|
||||
width: 180rpx;
|
||||
height: 170rpx;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
max-width: 440rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
98
uniapp/uni-app/shop/pages/integral/record.vue
Normal file
98
uniapp/uni-app/shop/pages/integral/record.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<view class="integral-record ml-lg mr-lg">
|
||||
<view class="pt-lg pb-lg b-1px-b" v-for="(item,index) in list.data" :key="index">
|
||||
<view class="flex-between f-title c-title">
|
||||
<view>{{item.type_text}}</view>
|
||||
<view class="f-sm-title text-bold" :style="{color:item.integral_add*1 > 0?primaryColor:subColor}">
|
||||
{{item.integral_add*1 > 0 ? `+${item.integral_add}` : item.integral_add}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="f-caption c-caption">{{item.create_time_text}}</view>
|
||||
</view>
|
||||
|
||||
<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
|
||||
</load-more>
|
||||
<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
|
||||
<view class="space-footer"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions
|
||||
} from 'vuex';
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
param: {
|
||||
page: 1,
|
||||
},
|
||||
list: {
|
||||
data: [],
|
||||
total: 0,
|
||||
current_page: 1,
|
||||
last_page: 1
|
||||
},
|
||||
loading: true
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
}),
|
||||
onLoad() {
|
||||
this.$util.showLoading()
|
||||
this.initIndex()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.showNavigationBarLoading()
|
||||
// #endif
|
||||
this.initRefresh()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
onReachBottom() {
|
||||
console.log(this.param.page)
|
||||
if (this.list.current_page >= this.list.last_page || this.loading) return
|
||||
this.param.page = this.param.page + 1
|
||||
this.loading = true
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
initIndex() {
|
||||
this.getList()
|
||||
},
|
||||
initRefresh() {
|
||||
this.param.page = 1
|
||||
this.initIndex()
|
||||
},
|
||||
async getList() {
|
||||
let {
|
||||
list: oldList,
|
||||
param
|
||||
} = this
|
||||
let newList = await this.$api.shop.integralList(param);
|
||||
|
||||
if (this.param.page == 1) {
|
||||
this.list = newList
|
||||
} else {
|
||||
newList.data = oldList.data.concat(newList.data)
|
||||
this.list = newList
|
||||
}
|
||||
this.loading = false
|
||||
this.$util.hideAll()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff
|
||||
}
|
||||
</style>
|
||||
570
uniapp/uni-app/shop/pages/luck.vue
Normal file
570
uniapp/uni-app/shop/pages/luck.vue
Normal file
@@ -0,0 +1,570 @@
|
||||
<template>
|
||||
<view class="shop-luck" v-if="isLoad">
|
||||
|
||||
<block v-if="detail.atv_id">
|
||||
<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" color="#fff"
|
||||
:backgroundColor="color == '#ffffff' ?``:primaryColor" leftIcon="icon-left"
|
||||
:title="color == '#ffffff' ?``:`积分抽奖`">
|
||||
</uni-nav-bar>
|
||||
<image mode="aspectFill" lazy-load class="luck-bg abs" :src="detail.cover"> </image>
|
||||
<view class="my-integral flex-center abs">
|
||||
<view class="flex-y-baseline">
|
||||
<view class="integral-num f-big-title icon-font-color mr-sm">{{detail.user_integral}}</view>
|
||||
<view class="f-title c-base">积分</view>
|
||||
</view>
|
||||
</view>
|
||||
<view @tap="$refs.show_rule_item.open()" class="rule-btn-info flex-center abs">
|
||||
<view class="rule-btn flex-center radius">
|
||||
<i class="iconfont icon-wenhao mr-sm"></i>
|
||||
规则说明
|
||||
</view>
|
||||
</view>
|
||||
<view @tap.stop="getList('record',1)" class="record-btn flex-center f-caption c-base abs">抽奖记录</view>
|
||||
<view class="luck-dialog-info flex-center abs">
|
||||
<view class="dialog-info" :style="'-webkit-transform:rotate(' + deg + 'deg) translateZ(0);transform:rotate(' + deg
|
||||
+ 'deg) translateZ(0)'">
|
||||
<image class="dialog-img" src="https://lbqny.migugu.com/admin/farm/luck-dialog.png"> </image>
|
||||
<view class="item-luck flex-center flex-column abs" :class="[`luck-${index}`]"
|
||||
v-for="(item,index) in detail.data" :key="index">
|
||||
<view class="flex-center f-icontext text-bold c-warning mb-sm">{{item.title}}</view>
|
||||
<image mode="aspectFill"
|
||||
:class="[{'thank-you-img':!item.is_luck},{'icon-img radius-10':item.is_luck}]"
|
||||
:src="item.icon || thank_you_img">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
<image @tap="toLuck" class="pointer-img abs" src="https://lbqny.migugu.com/admin/farm/luck-pointer.png">
|
||||
</image>
|
||||
<view class="use-integral flex-center f-icontext c-base abs">{{`${detail.integral}积分`}}</view>
|
||||
</view>
|
||||
|
||||
<image class="num-img abs" src="https://lbqny.migugu.com/admin/farm/luck-num.png">
|
||||
</image>
|
||||
<view class="have-change abs flex-center f-caption c-base">还有<view class="num">{{detail.user_num}}次</view>
|
||||
抽奖机会
|
||||
</view>
|
||||
<view class="user-list abs">
|
||||
<image class="user-list-img abs" src="https://lbqny.migugu.com/admin/farm/luck-user-list.png">
|
||||
</image>
|
||||
<view class="title flex-center f-sm-title text-bold">中奖信息</view>
|
||||
<scroll-view scroll-y @scrolltolower="scrolltolower($event,'user')" :scroll-with-animation="true"
|
||||
lower-threshold="100" class="luck-user">
|
||||
<view class="mt-sm mb-sm" :style="{color:primaryColor}" v-for="(item,index) in list.user.data"
|
||||
:key="index">
|
||||
恭喜<span
|
||||
class="text ml-sm mr-sm">{{item.nickName.length > 5 ? `${item.nickName.substring(0,5)}...` : item.nickName}}</span>抽中了<span
|
||||
class="text ml-sm">
|
||||
{{item.type == 1? `1张卡券`:`${item.integral}积分`}}
|
||||
</span>
|
||||
</view>
|
||||
<view class="flex-center f-paragraph c-caption mt-sm" v-if="list.user.data.length ==0 ">
|
||||
暂无中奖信息，快来参加抽奖吧</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<image class="squirrel-img abs" src="https://lbqny.migugu.com/admin/farm/squirrel.png">
|
||||
</image>
|
||||
</block>
|
||||
<block v-else>
|
||||
<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" color="#fff" :backgroundColor="primaryColor"
|
||||
leftIcon="icon-left" title="积分抽奖">
|
||||
</uni-nav-bar>
|
||||
<abnor></abnor>
|
||||
</block>
|
||||
<uni-popup ref="show_rule_item">
|
||||
<view class="popup-rule">
|
||||
<view class="rule-info pd-lg fill-base radius-24">
|
||||
<view class="flex-center f-title c-title text-bold">规则说明</view>
|
||||
<view class="rule-text mt-lg f-paragraph">
|
||||
<text decode="emsp" style="word-break:break-all;">{{detail.text}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<i @tap="$refs.show_rule_item.close()" class="flex-center mt-lg iconfont icon-close c-base"></i>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<uni-popup ref="show_record_item" type="center" :custom="true">
|
||||
<view class="popup-record rel">
|
||||
<image class="record-img abs" src="https://lbqny.migugu.com/admin/farm/luck-record.png"></image>
|
||||
<view class="record-title flex-center f-lg-title text-bold c-base abs">我的抽奖纪录</view>
|
||||
<view class="record-content fill-base abs">
|
||||
<scroll-view scroll-y @scrolltolower="scrolltolower($event,'record')" :scroll-with-animation="true"
|
||||
lower-threshold="100" class="luck-record">
|
||||
<view class="flex-center pt-md pb-md b-1px-b" v-for="(item,index) in list.record.data"
|
||||
:key="index">
|
||||
<image mode="aspectFill" class="icon-img" :class="[{'radius-4':item.is_luck}]"
|
||||
:src="item.icon || thank_you_img"></image>
|
||||
<view class="flex-1 flex-between ml-sm">
|
||||
<view :style="{color:item.is_luck?primaryColor: '#777'}">
|
||||
{{!item.is_luck ? item.title : item.type == 1? `1张卡券`:`${item.integral}积分`}}
|
||||
</view>
|
||||
<view class="f-caption c-caption">{{item.create_time}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-center f-paragraph c-caption mt-sm" v-if="list.record.data.length ==0 ">
|
||||
暂无抽奖记录，快来参加抽奖吧</view>
|
||||
</scroll-view>
|
||||
<view @tap.stop="$refs.show_record_item.close()"
|
||||
class="confirm-btn flex-center f-sm-title text-bold c-base radius"
|
||||
:style="{background:primaryColor}">确定</view>
|
||||
<view class="space-lg"></view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
isLoad: false,
|
||||
options: {},
|
||||
color: '#ffffff',
|
||||
detail: {},
|
||||
param: {
|
||||
record: {
|
||||
page: 1
|
||||
},
|
||||
user: {
|
||||
page: 1
|
||||
}
|
||||
},
|
||||
list: {
|
||||
record: {
|
||||
data: []
|
||||
},
|
||||
user: {
|
||||
data: []
|
||||
}
|
||||
},
|
||||
loading: true,
|
||||
// 抽奖信息
|
||||
thank_you_img: 'https://lbqny.migugu.com/admin/farm/thank-you.png',
|
||||
luckInd: 0,
|
||||
areaNumber: 9, //划分区域
|
||||
speed: 16, //速度
|
||||
deg: 0,
|
||||
singleAngle: '', // 每片扇形的角度
|
||||
isStart: false
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
userInfo: state => state.user.userInfo,
|
||||
}),
|
||||
onLoad(options) {
|
||||
this.$util.showLoading()
|
||||
this.options = options
|
||||
this.initIndex()
|
||||
},
|
||||
onPageScroll(e) {
|
||||
let color = e.scrollTop < 20 ? '#ffffff' : '#000000'
|
||||
if (this.color == color) return
|
||||
this.color = color
|
||||
},
|
||||
methods: {
|
||||
async initIndex(refresh = false) {
|
||||
let {
|
||||
areaNumber
|
||||
} = this
|
||||
this.singleAngle = 360 / areaNumber
|
||||
await this.getDetail(refresh)
|
||||
this.isLoad = true
|
||||
},
|
||||
initRefresh() {
|
||||
this.initIndex(true)
|
||||
},
|
||||
async getDetail(refresh) {
|
||||
let data = await this.$api.shop.luckInfo()
|
||||
data.integral = parseInt(data.integral)
|
||||
this.detail = data
|
||||
if (refresh) {
|
||||
this.$util.hideAll()
|
||||
return
|
||||
}
|
||||
this.getList('user', 1)
|
||||
this.$util.hideAll()
|
||||
},
|
||||
async getList(type, page) {
|
||||
let {
|
||||
atv_id
|
||||
} = this.detail
|
||||
if (page) this.param[type].page = 1
|
||||
let param = this.param[type]
|
||||
param.id = atv_id
|
||||
let oldList = this.list[type]
|
||||
let methodModel = type == 'record' ? 'userLuckRecord' : 'luckRecord'
|
||||
let newList = await this.$api.shop[methodModel](param);
|
||||
if (this.param[type].page == 1) {
|
||||
this.list[type] = newList
|
||||
} else {
|
||||
newList.data = oldList.data.concat(newList.data)
|
||||
this.list[type] = newList
|
||||
}
|
||||
this.loading = false
|
||||
this.$util.hideAll()
|
||||
if (type == 'record') {
|
||||
this.$refs.show_record_item.open()
|
||||
}
|
||||
},
|
||||
scrolltolower(e, type) {
|
||||
if (this.list[type].current_page >= this.list[type].last_page || this.loading) return
|
||||
this.param[type].page = this.param[type].page + 1
|
||||
this.loading = true
|
||||
this.getList(type)
|
||||
},
|
||||
// 用户点击开始抽奖
|
||||
async toLuck() {
|
||||
let {
|
||||
atv_id,
|
||||
} = this.detail
|
||||
let {
|
||||
id
|
||||
} = await this.$api.shop.luckDraw({
|
||||
id: atv_id
|
||||
})
|
||||
let index = this.detail.data.findIndex(item => {
|
||||
return item.id == id
|
||||
})
|
||||
this.luckInd = index
|
||||
this.toBegin()
|
||||
await this.initRefresh()
|
||||
},
|
||||
// 开始抽奖
|
||||
toBegin() {
|
||||
let {
|
||||
deg,
|
||||
singleAngle,
|
||||
speed,
|
||||
isStart,
|
||||
luckInd
|
||||
} = this
|
||||
if (isStart) return
|
||||
this.isStart = true
|
||||
let endAddAngle = 360 - (luckInd * singleAngle + singleAngle / 2); //中奖角度
|
||||
let rangeAngle = (Math.floor(Math.random() * 4) + 4) * 360; // 随机旋转几圈再停止
|
||||
let cAngle;
|
||||
deg = 0;
|
||||
this.timer = setInterval(() => {
|
||||
if (deg < rangeAngle) {
|
||||
deg += speed;
|
||||
} else {
|
||||
cAngle = (endAddAngle + rangeAngle - deg) / speed;
|
||||
cAngle = cAngle > speed ? speed : cAngle < 1 ? 1 : cAngle;
|
||||
deg += cAngle;
|
||||
|
||||
if (deg >= endAddAngle + rangeAngle) {
|
||||
deg = endAddAngle + rangeAngle;
|
||||
this.isStart = false;
|
||||
clearInterval(this.timer);
|
||||
this.toSuccess()
|
||||
}
|
||||
}
|
||||
this.deg = deg
|
||||
}, 1000 / 60)
|
||||
},
|
||||
// 抽奖完成后操作
|
||||
toSuccess() {
|
||||
let {
|
||||
luckInd
|
||||
} = this
|
||||
let {
|
||||
title = '',
|
||||
is_luck = 0,
|
||||
type = 1,
|
||||
coupon_title = '',
|
||||
integral = 0
|
||||
} = this.detail.data[luckInd]
|
||||
let msg = !is_luck ? title : type == 1 ? `恭喜您获得1张卡券(${coupon_title})` : `恭喜您获得${integral}积分`
|
||||
this.$util.showToast({
|
||||
title: msg
|
||||
})
|
||||
this.getList('user', 1)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.shop-luck {
|
||||
.luck-bg {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1912rpx;
|
||||
}
|
||||
|
||||
.my-integral {
|
||||
top: 145rpx;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
|
||||
.integral-num {
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 2rpx;
|
||||
background: -webkit-linear-gradient(90deg, #FFFBCD, #F4F56F);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.rule-btn-info {
|
||||
top: 351rpx;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 59rpx;
|
||||
|
||||
.rule-btn {
|
||||
width: 204rpx;
|
||||
height: 59rpx;
|
||||
color: #0879CE;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
|
||||
.iconfont {
|
||||
color: rgba(8, 121, 206, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.record-btn {
|
||||
top: 450rpx;
|
||||
right: 0;
|
||||
width: 150rpx;
|
||||
height: 53rpx;
|
||||
background: rgba(0, 107, 191, 0.48);
|
||||
border-radius: 100rpx 0 0 100rpx;
|
||||
}
|
||||
|
||||
.luck-dialog-info {
|
||||
top: 451rpx;
|
||||
left: 102rpx;
|
||||
width: 545rpx;
|
||||
|
||||
.dialog-info {
|
||||
|
||||
.dialog-img {
|
||||
width: 545rpx;
|
||||
height: 541rpx;
|
||||
transform: rotate(-23deg);
|
||||
}
|
||||
|
||||
.item-luck {
|
||||
width: 150rpx;
|
||||
height: 120rpx;
|
||||
|
||||
.thank-you-img {
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
margin-top: 3rpx;
|
||||
}
|
||||
|
||||
.icon-img {
|
||||
width: 56rpx;
|
||||
height: 52rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.luck-0 {
|
||||
top: 60rpx;
|
||||
left: 250rpx;
|
||||
transform: rotate(20deg);
|
||||
}
|
||||
|
||||
.luck-1 {
|
||||
top: 129rpx;
|
||||
left: 335rpx;
|
||||
transform: rotate(61deg);
|
||||
}
|
||||
|
||||
.luck-2 {
|
||||
top: 238rpx;
|
||||
left: 352rpx;
|
||||
transform: rotate(101deg);
|
||||
}
|
||||
|
||||
.luck-3 {
|
||||
top: 331rpx;
|
||||
left: 298rpx;
|
||||
transform: rotate(141deg);
|
||||
}
|
||||
|
||||
.luck-4 {
|
||||
top: 368rpx;
|
||||
left: 196rpx;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.luck-5 {
|
||||
top: 330rpx;
|
||||
left: 96rpx;
|
||||
transform: rotate(220deg);
|
||||
}
|
||||
|
||||
.luck-6 {
|
||||
top: 238rpx;
|
||||
left: 42rpx;
|
||||
transform: rotate(260deg);
|
||||
}
|
||||
|
||||
.luck-7 {
|
||||
top: 130rpx;
|
||||
left: 58rpx;
|
||||
transform: rotate(300deg);
|
||||
}
|
||||
|
||||
.luck-8 {
|
||||
top: 60rpx;
|
||||
left: 141rpx;
|
||||
transform: rotate(340deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.pointer-img {
|
||||
top: 174rpx;
|
||||
left: 183rpx;
|
||||
width: 179rpx;
|
||||
height: 210rpx;
|
||||
}
|
||||
|
||||
.use-integral {
|
||||
top: 305rpx;
|
||||
left: 205rpx;
|
||||
width: 135rpx;
|
||||
transform: scale(0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.num-img {
|
||||
top: 903rpx;
|
||||
left: 124rpx;
|
||||
width: 502rpx;
|
||||
height: 236rpx;
|
||||
}
|
||||
|
||||
.have-change {
|
||||
top: 1060rpx;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
|
||||
.num {
|
||||
color: #FFEA8F;
|
||||
}
|
||||
}
|
||||
|
||||
.user-list {
|
||||
top: 1187rpx;
|
||||
left: 45rpx;
|
||||
width: 660rpx;
|
||||
height: 616rpx;
|
||||
z-index: 2;
|
||||
|
||||
.user-list-img {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 660rpx;
|
||||
height: 616rpx;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 68rpx;
|
||||
color: #AB5D10;
|
||||
}
|
||||
|
||||
.luck-user {
|
||||
width: 560rpx;
|
||||
height: 480rpx;
|
||||
padding: 20rpx 50rpx;
|
||||
|
||||
.text {
|
||||
color: #FF8A00;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.squirrel-img {
|
||||
top: 1730rpx;
|
||||
right: 30rpx;
|
||||
width: 141rpx;
|
||||
height: 141rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.popup-rule {
|
||||
width: 596rpx;
|
||||
margin: 0 auto;
|
||||
|
||||
.rule-info {
|
||||
margin-top: 10vh;
|
||||
|
||||
.rule-text {
|
||||
color: #4A4A4A;
|
||||
line-height: 1.4;
|
||||
min-height: 100rpx;
|
||||
max-height: 60vh;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-close {
|
||||
font-size: 70rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.popup-record {
|
||||
width: 715rpx;
|
||||
height: 800rpx;
|
||||
|
||||
.record-img {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 715rpx;
|
||||
height: 163rpx;
|
||||
}
|
||||
|
||||
.record-title {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
.record-content {
|
||||
top: 99rpx;
|
||||
left: 55rpx;
|
||||
width: 608rpx;
|
||||
border-radius: 0 0 24rpx 24rpx;
|
||||
|
||||
.luck-record {
|
||||
min-height: 100rpx;
|
||||
max-height: 50vh;
|
||||
width: 546rpx;
|
||||
padding: 30rpx;
|
||||
|
||||
.icon-img {
|
||||
width: 61rpx;
|
||||
height: 61rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 415rpx;
|
||||
height: 80rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
628
uniapp/uni-app/shop/pages/order.vue
Normal file
628
uniapp/uni-app/shop/pages/order.vue
Normal file
@@ -0,0 +1,628 @@
|
||||
<template>
|
||||
<view class="shop-order" v-if="isLoad">
|
||||
<view class="fill-base mt-md ml-md mr-md f-paragraph box-shadow radius-24">
|
||||
<view class="pd-lg f-sm-title c-title text-bold b-1px-b">收货地址</view>
|
||||
<view @tap.stop="toChooseAddr" class="pl-lg pr-md pt-lg pb-lg flex-center" v-if="orderInfo.address.id">
|
||||
<view class="flex-1">
|
||||
<view class="flex-warp">
|
||||
<i class="iconfont icon-dingwei mr-sm" style="font-size: 28rpx;margin-top: 6rpx;"></i>
|
||||
<view class="f-paragraph c-title flex-1 max-520">
|
||||
{{`${orderInfo.address.address}${orderInfo.address.address_info}`}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-y-baseline f-paragraph c-caption" style="margin:5rpx 0 0 38rpx;">
|
||||
{{orderInfo.address.user_name }}
|
||||
<view class="ml-lg">
|
||||
{{orderInfo.address.mobile}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<i class="iconfont icon-right"></i>
|
||||
</view>
|
||||
<block v-else>
|
||||
<view class="space-lg"></view>
|
||||
<view class="space-lg"></view>
|
||||
<view @tap.stop="toChooseAddr" class="add-btn flex-center f-paragraph c-desc"><i
|
||||
class="iconfont icon-add-circle-fill mr-sm"></i>添加地址
|
||||
</view>
|
||||
<view class="space-lg"></view>
|
||||
<view class="space-lg"></view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<view class="fill-base mt-md ml-md mr-md f-paragraph box-shadow radius-24">
|
||||
<view class="flex-between ml-md mr-md pl-sm pt-lg pb-lg b-1px-b">
|
||||
<view class="item-text c-black">配送时间</view>
|
||||
<view @tap.stop="$util.goUrl({url:`/mine/pages/choose-time`})" class="flex-y-center">
|
||||
<view class="flex-1 text-right"
|
||||
:class="[{'c-placeholder':!send_info.time.id},{'c-title':send_info.time.id}]">
|
||||
{{send_info.time.id ? `${send_info.time.date} ${send_info.time.time_text}` : '请选择时间'}}
|
||||
</view>
|
||||
<i class="iconfont icon-right"></i>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-between pl-sm pr-lg pt-lg pb-lg">
|
||||
<view class="flex-y-center">
|
||||
<i class="iconfont icon-required c-base"></i>
|
||||
<view class="item-text">订单备注</view>
|
||||
</view>
|
||||
<input v-model="subForm.text" type="text" class="flex-1 f-paragraph text-right" maxlength="100"
|
||||
placeholder-class="c-placeholder" placeholder="请输入订单备注" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="goods-list fill-base mt-md ml-md mr-md pl-sm pr-sm f-paragraph box-shadow radius-24"
|
||||
v-for="(item,index) in orderInfo.order_goods" :key="index">
|
||||
<view class="flex-y-center ml-md mr-md pt-lg pb-lg b-1px-b">
|
||||
<i class="iconfont icon-dianpu mr-sm"></i>
|
||||
<view class="f-title c-title text-bold ellipsis">{{item.farmer_info.title}}</view>
|
||||
<i class="iconfont icon-right"></i>
|
||||
</view>
|
||||
<view class="item-child flex-warp ml-lg mr-lg pb-lg" :class="[{'pt-lg':aindex==0}]"
|
||||
v-for="(aitem,aindex) in item.goods_list" :key="aindex">
|
||||
<view class="rel">
|
||||
<image @tap.stop="goDetail(index)" mode="aspectFill" lazy-load class="goods-img radius-16"
|
||||
:src="aitem.cover"></image>
|
||||
<view class="sell-out-info flex-center abs radius-16" v-if="aitem.all_stock < 1">
|
||||
<image mode="aspectFill" lazy-load class="sell-out-img"
|
||||
:src="`/static/image/shop/sell_out.png`"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-1 ml-md">
|
||||
<view class="f-title c-title text-bold max-476 ellipsis">{{aitem.goods_name}}</view>
|
||||
<view class="f-caption c-caption max-476 ellipsis"> {{aitem.spe_name}} </view>
|
||||
<view class="f-desc c-warning" v-if="aitem.integral_id">
|
||||
{{aitem.i_price*1>0?`${aitem.integral}积分+${aitem.i_price}元`:`${aitem.integral}积分`}}
|
||||
</view>
|
||||
<block v-if="aitem.kill_atv_id">
|
||||
<view class="f-desc c-warning"> 每件到手件 ¥{{aitem.kill_price}} </view>
|
||||
<view class="seckill-info flex-y-center f-icontext c-warning">
|
||||
<min-countdown :type="3" :targetTime="aitem.kill_end_time * 1000" color="#FF5537"
|
||||
textColor="#FF583C" borderColor="#FF583C" className="mini" @callback="countEnd">
|
||||
</min-countdown>
|
||||
秒杀即将结束，优惠不等人
|
||||
</view>
|
||||
</block>
|
||||
<view class="flex-y-baseline mt-sm">
|
||||
<view class="flex-y-baseline flex-1 f-title c-warning">
|
||||
<view class="f-caption c-caption mr-sm" v-if="aitem.integral_id || aitem.kill_atv_id">商城价
|
||||
</view>
|
||||
¥<view class="text-bold"> {{aitem.price}} </view>
|
||||
</view>
|
||||
<view class="f-caption c-caption">x {{aitem.goods_num}} </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ml-md mr-md pt-lg pb-lg f-paragraph c-title b-1px-t">
|
||||
<view class="flex-between">
|
||||
<view>商品金额</view>
|
||||
<view>¥{{item.init_goods_price}}</view>
|
||||
</view>
|
||||
<view class="flex-between mt-sm">
|
||||
<view>配送费</view>
|
||||
<view>¥{{item.freight}}</view>
|
||||
</view>
|
||||
<view class="flex-between mt-sm" v-if="orderInfo.kill_discount_price*1>0">
|
||||
<view>秒杀优惠</view>
|
||||
<view class="c-warning">-¥{{orderInfo.kill_discount_price}}</view>
|
||||
</view>
|
||||
<block v-if="orderInfo.order_goods.length === 1">
|
||||
<!-- buy_limit 0不支持原价购买；1支持原价购买 -->
|
||||
<block v-if="orderInfo.integral">
|
||||
<view @tap.stop="toChangeItem('no_i', no_i == 0 ? 1 : 0,)" class="flex-between mt-sm">
|
||||
<view class="flex-y-center" style="height: 40rpx"> <i class="iconfont c-caption mr-sm"
|
||||
:class="[{ 'icon-xuanze': no_i }, { 'icon-xuanze-fill': !no_i }]"
|
||||
:style="{ color: !no_i ? primaryColor : '' }"></i>使用积分
|
||||
</view>
|
||||
<view class="c-warning">{{ orderInfo.integral }}</view>
|
||||
</view>
|
||||
<view class="flex-between mt-sm" v-if="!no_i && item.integral_discount_price*1>0">
|
||||
<view>积分抵扣</view>
|
||||
<view class="c-warning">-¥{{item.integral_discount_price}}</view>
|
||||
</view>
|
||||
</block>
|
||||
<block>
|
||||
<block v-if="(orderInfo.buy_limit == 0 || !no_i)&& orderInfo.discount_add == 0">
|
||||
</block>
|
||||
<view class="flex-between mt-md" v-else>
|
||||
<view class="item-text">卡券优惠</view>
|
||||
<view
|
||||
@tap.stop="$util.goUrl({url:`/mine/pages/coupon/use?type=3&is_show=${options.is_show}&no_i=${no_i}`})"
|
||||
class="flex-y-center">
|
||||
<view class="flex-1 text-right">
|
||||
{{ orderInfo.coupon_id ? `-¥${orderInfo.coupon_discount}` : `${orderInfo.canUseCoupon}张可用` }}
|
||||
</view>
|
||||
<i class="iconfont icon-right"></i>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="flex-between mt-sm" v-if="!no_i && item.integral_discount_price*1>0">
|
||||
<view>积分抵扣</view>
|
||||
<view class="c-warning">-¥{{item.integral_discount_price}}</view>
|
||||
</view>
|
||||
<view class="flex-between mt-sm" v-if="item.coupon_discount*1>0">
|
||||
<view>卡券优惠</view>
|
||||
<view class="c-warning">-¥{{item.coupon_discount}}</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="flex-between mt-sm">
|
||||
<view>小计</view>
|
||||
<view class="f-title text-bold c-warning">¥{{ item.pay_price }} </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fill-base mt-md ml-md mr-md f-paragraph box-shadow radius-24"
|
||||
v-if="orderInfo.order_goods.lengh > 1">
|
||||
<view class="flex-between ml-md mr-md pt-lg">
|
||||
<view class="item-text c-black">商品金额</view>
|
||||
<view>¥{{ orderInfo.init_goods_price }} </view>
|
||||
</view>
|
||||
<view class="flex-between ml-md mr-md pt-md">
|
||||
<view class="item-text c-black">配送费</view>
|
||||
<view>¥{{ orderInfo.freight }} </view>
|
||||
</view>
|
||||
<!-- buy_limit 0不支持原价购买；1支持原价购买 -->
|
||||
<block v-if="orderInfo.integral">
|
||||
<view @tap.stop="toChangeItem('no_i', no_i == 0 ? 1 : 0,)"
|
||||
class="flex-between ml-md mr-md c-title pt-md">
|
||||
<view class="flex-y-center pl-sm c-black" style="height: 40rpx"> <i class="iconfont c-caption mr-sm"
|
||||
:class="[{ 'icon-xuanze': no_i }, { 'icon-xuanze-fill': !no_i }]"
|
||||
:style="{ color: !no_i ? primaryColor : '' }"></i>使用积分
|
||||
</view>
|
||||
<view class="c-warning">{{ orderInfo.integral }}</view>
|
||||
</view>
|
||||
<view class="flex-between ml-md mr-md pl-sm pt-md" v-if="!no_i">
|
||||
<view class="item-text c-black">积分抵扣</view>
|
||||
<view class="c-warning">-¥{{ orderInfo.integral_discount_price }} </view>
|
||||
</view>
|
||||
</block>
|
||||
<block>
|
||||
<block v-if="(orderInfo.buy_limit == 0 || !no_i)&& orderInfo.discount_add == 0">
|
||||
</block>
|
||||
<view class="flex-between ml-md mr-md pl-sm pt-md" v-else>
|
||||
<view class="item-text c-black">卡券优惠</view>
|
||||
<view
|
||||
@tap.stop="$util.goUrl({url:`/mine/pages/coupon/use?type=3&is_show=${options.is_show}&no_i=${no_i}`})"
|
||||
class="flex-y-center">
|
||||
<view class="flex-1 text-right">
|
||||
{{ orderInfo.coupon_id ? `-¥${orderInfo.coupon_discount}` : `${orderInfo.canUseCoupon}张可用` }}
|
||||
</view>
|
||||
<i class="iconfont icon-right"></i>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="flex-between mt-lg ml-md mr-md pt-lg pb-lg b-1px-t">
|
||||
<view class="item-text c-black">合计</view>
|
||||
<view class="f-title text-bold c-warning">¥{{ orderInfo.pay_price }} </view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fill-base mt-md ml-md mr-md f-sm-title box-shadow radius-24">
|
||||
<view @tap.stop="toChangeItem('payInd',index)"
|
||||
class="flex-between ml-md mr-md pl-sm pr-sm pt-lg pb-lg b-1px-b" v-for="(item,index) in payList"
|
||||
:key="index">
|
||||
<view class="pay-item flex-y-center"><i class="iconfont mr-md" :class="[item.icon]"
|
||||
:style="{color:item.id==1?primaryColor:item.id==2?subColor:'#01AAF2'}"></i>
|
||||
<view class="flex-y-baseline">{{item.title}}
|
||||
<view class="f-paragraph c-caption ml-sm" v-if="item.id==2">余额{{userInfo.balance || 0}}元
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<i class="pay-icon iconfont c-caption"
|
||||
:class="[{'icon-xuanze':payInd != index},{'icon-radio-fill':item.is_disabled || payInd == index}]"
|
||||
:style="{color:payInd==index?primaryColor:''}"></i>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="space-max-footer"></view>
|
||||
<view class="footer-btn fill-base fix">
|
||||
<view class="footer-item flex-between pl-lg pr-lg">
|
||||
<view class="flex-y-baseline f-paragraph c-title">
|
||||
合计：<view class="f-sm-title c-warning text-bold">¥{{orderInfo.pay_price}}</view>
|
||||
</view>
|
||||
<auth :needAuth="userInfo && !userInfo.nickName" :must="true" type="userInfo" @go="toOrder" class="order-btn" style="width:332rpx">
|
||||
<view class="order-btn flex-center f-sm-title c-base text-bold radius-20"
|
||||
:style="{background:primaryColor}">立即支付
|
||||
</view>
|
||||
</auth>
|
||||
</view>
|
||||
<view class="space-safe"></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions,
|
||||
mapMutations
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
isLoad: false,
|
||||
options: {},
|
||||
scrollTop: 0,
|
||||
// 1微信支付；2余额支付；3支付宝支付
|
||||
payList: [{
|
||||
id: 1,
|
||||
title: '微信支付',
|
||||
icon: 'icon-wechat-pay',
|
||||
is_disabled: false
|
||||
}
|
||||
// #ifdef APP-PLUS
|
||||
, {
|
||||
id: 3,
|
||||
title: '支付宝支付',
|
||||
icon: 'icon-alipay',
|
||||
is_disabled: false
|
||||
}
|
||||
// #endif
|
||||
, {
|
||||
id: 2,
|
||||
title: '余额支付',
|
||||
icon: 'icon-qianbao',
|
||||
is_disabled: false
|
||||
}
|
||||
],
|
||||
payInd: 0,
|
||||
// #ifdef APP-PLUS
|
||||
balanceInd: 2,
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
balanceInd: 1,
|
||||
// #endif
|
||||
sendList: [{
|
||||
id: 1,
|
||||
title: '自提',
|
||||
}, {
|
||||
id: 2,
|
||||
title: '快递',
|
||||
}],
|
||||
sendInd: 1,
|
||||
send_info: {
|
||||
time_index: '',
|
||||
time: {
|
||||
date: '',
|
||||
start_time: '',
|
||||
end_time: ''
|
||||
}
|
||||
},
|
||||
no_i: 0,
|
||||
orderInfo: {
|
||||
address: {
|
||||
id: 0
|
||||
}
|
||||
},
|
||||
subForm: {
|
||||
text: ''
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
userInfo: state => state.user.userInfo,
|
||||
}),
|
||||
onLoad(options) {
|
||||
let {
|
||||
is_show = 1,
|
||||
no_i = 1
|
||||
} = options
|
||||
options.is_show = is_show
|
||||
this.options = options
|
||||
this.no_i = no_i * 1
|
||||
this.initIndex()
|
||||
},
|
||||
onUnload() {
|
||||
if (this.options.is_show == 2) return
|
||||
this.$util.back()
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getUserInfo', 'getAuthPhone']),
|
||||
...mapMutations(['updateOrderItem']),
|
||||
async initIndex(refresh = false) {
|
||||
if (!refresh) {
|
||||
await this.getUserInfo()
|
||||
}
|
||||
let {
|
||||
balance,
|
||||
phone
|
||||
} = this.userInfo
|
||||
let {
|
||||
address = {}, coupon_id = 0, buy_limit = 1, discount_add = 1
|
||||
} = this.orderInfo
|
||||
let {
|
||||
id: address_id = 0
|
||||
} = address
|
||||
let {
|
||||
is_show,
|
||||
} = this.options
|
||||
let {
|
||||
no_i
|
||||
} = this
|
||||
if ((!buy_limit || !no_i) && !discount_add) {
|
||||
coupon_id = 0
|
||||
}
|
||||
let orderInfo = await this.$api.shop.payOrderInfo({
|
||||
address_id,
|
||||
coupon_id,
|
||||
is_show,
|
||||
no_i
|
||||
})
|
||||
let {
|
||||
pay_price,
|
||||
buy_limit: buy = 1
|
||||
} = orderInfo
|
||||
let is_disabled = balance * 1 < pay_price * 1
|
||||
let {
|
||||
balanceInd
|
||||
} = this
|
||||
this.payList[balanceInd].is_disabled = is_disabled
|
||||
if (pay_price * 1 == 0) {
|
||||
this.payList[0].is_disabled = true
|
||||
// #ifdef APP-PLUS
|
||||
this.payList[1].is_disabled = true
|
||||
// #endif
|
||||
this.payInd = balanceInd
|
||||
}
|
||||
this.no_i = !buy ? 0 : no_i
|
||||
this.orderInfo = orderInfo
|
||||
this.isLoad = true
|
||||
},
|
||||
initRefresh() {
|
||||
this.initIndex(true)
|
||||
},
|
||||
toChangeItem(key, index) {
|
||||
if (key == 'payInd' && index == 2 && this.payList[index].is_disabled) return
|
||||
if (key == 'no_i' && this.orderInfo.buy_limit == 0) return
|
||||
this[key] = index
|
||||
if (key == 'no_i') {
|
||||
this.initRefresh()
|
||||
}
|
||||
},
|
||||
toChooseAddr() {
|
||||
this.$util.goUrl({
|
||||
url: `/mine/pages/address/list?check=1`
|
||||
})
|
||||
},
|
||||
toOrder() {
|
||||
let {
|
||||
payList,
|
||||
payInd,
|
||||
sendList,
|
||||
sendInd,
|
||||
subForm,
|
||||
no_i
|
||||
} = this
|
||||
let {
|
||||
is_show
|
||||
} = this.options
|
||||
let {
|
||||
id: pay_model
|
||||
} = payList[payInd]
|
||||
let {
|
||||
id: send_type
|
||||
} = sendList[sendInd]
|
||||
let {
|
||||
address = {}, coupon_id = 0
|
||||
} = this.orderInfo
|
||||
let {
|
||||
id: address_id = 0
|
||||
} = address
|
||||
if (!address_id && send_type == 2) {
|
||||
this.$util.showToast({
|
||||
title: `请选择收货地址`
|
||||
})
|
||||
return
|
||||
}
|
||||
let {
|
||||
date = '',
|
||||
start_time = '',
|
||||
end_time = ''
|
||||
} = this.send_info.time
|
||||
if (!date) {
|
||||
this.$util.showToast({
|
||||
title: `请选择配送时间`
|
||||
})
|
||||
return
|
||||
}
|
||||
start_time = this.$util.DateToUnix(`${date} ${start_time}`)
|
||||
end_time = this.$util.DateToUnix(`${date} ${end_time}`)
|
||||
let param = Object.assign({}, subForm, {
|
||||
address_id,
|
||||
coupon_id,
|
||||
send_type,
|
||||
start_time,
|
||||
end_time,
|
||||
pay_model,
|
||||
is_show,
|
||||
no_i
|
||||
});
|
||||
this.toPay(param)
|
||||
},
|
||||
async toPay(param) {
|
||||
// #ifdef MP-WEIXIN
|
||||
let that = this
|
||||
let {
|
||||
tmp_list = []
|
||||
} = that.orderInfo
|
||||
let tmplIds = []
|
||||
tmp_list.map(item => {
|
||||
tmplIds.push(item.tmpl_id)
|
||||
})
|
||||
if (tmplIds && tmplIds.length > 0) {
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds,
|
||||
complete(res) {
|
||||
that.toConfirmPay(param)
|
||||
console.log(res, "complete requestSubscribeMessage");
|
||||
}
|
||||
})
|
||||
} else {
|
||||
that.toConfirmPay(param)
|
||||
}
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
this.toConfirmPay(param)
|
||||
// #endif
|
||||
},
|
||||
async toConfirmPay(param) {
|
||||
if (this.lockTap) return
|
||||
this.lockTap = true
|
||||
this.$util.showLoading()
|
||||
try {
|
||||
let {
|
||||
pay_list
|
||||
} = await this.$api.shop.payOrder(param)
|
||||
this.$util.hideAll()
|
||||
if (pay_list) {
|
||||
if (param.pay_model == 3) {
|
||||
pay_list = {
|
||||
orderInfo: pay_list,
|
||||
provider: 'alipay'
|
||||
}
|
||||
}
|
||||
try {
|
||||
await this.$util.pay(pay_list)
|
||||
this.$util.showToast({
|
||||
title: `支付成功`
|
||||
})
|
||||
this.updateOrderItem({
|
||||
key: 'haveOperItem',
|
||||
val: true
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.$util.back()
|
||||
this.$util.goUrl({
|
||||
url: '/mine/pages/pay-result?type=shop',
|
||||
openType: 'redirectTo'
|
||||
})
|
||||
}, 1000)
|
||||
this.lockTap = false
|
||||
return
|
||||
} catch (e) {
|
||||
this.$util.showToast({
|
||||
title: `支付失败`
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.$util.back()
|
||||
this.$util.goUrl({
|
||||
url: `/shop/pages/order/list`,
|
||||
openType: 'redirectTo'
|
||||
})
|
||||
}, 1000)
|
||||
this.lockTap = false
|
||||
return
|
||||
}
|
||||
}
|
||||
this.$util.showToast({
|
||||
title: `支付成功`
|
||||
})
|
||||
this.updateOrderItem({
|
||||
key: 'haveOperItem',
|
||||
val: true
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.$util.back()
|
||||
this.$util.goUrl({
|
||||
url: '/mine/pages/pay-result?type=shop',
|
||||
openType: 'redirectTo'
|
||||
})
|
||||
}, 1000)
|
||||
} catch (e) {
|
||||
setTimeout(() => {
|
||||
this.lockTap = false
|
||||
this.$util.hideAll()
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.shop-order {
|
||||
|
||||
.add-btn {
|
||||
width: 296rpx;
|
||||
height: 72rpx;
|
||||
background: #F6F6F6;
|
||||
border-radius: 36rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pay-item {
|
||||
.iconfont {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.pay-icon {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.icon-right {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
width: 150rpx;
|
||||
}
|
||||
|
||||
.goods-list {
|
||||
|
||||
.item-child {
|
||||
.goods-img {
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
border: 1px solid rgba(238, 238, 238, 0.79);
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
|
||||
.sell-out-info {
|
||||
top: 1rpx;
|
||||
left: 1rpx;
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
|
||||
.sell-out-img {
|
||||
width: 84rpx;
|
||||
height: 23rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.seckill-info {
|
||||
width: 100%;
|
||||
height: 44rpx;
|
||||
margin-top: 5rpx;
|
||||
background: linear-gradient(to right, rgba(255, 85, 55, 0.5), rgba(255, 255, 255, 0.5));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
bottom: 0;
|
||||
|
||||
.footer-item {
|
||||
height: 114rpx;
|
||||
|
||||
.order-btn {
|
||||
width: 332rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
476
uniapp/uni-app/shop/pages/order/detail.vue
Normal file
476
uniapp/uni-app/shop/pages/order/detail.vue
Normal file
@@ -0,0 +1,476 @@
|
||||
<template>
|
||||
<view class="shop-order-detail" v-if="detail.id">
|
||||
<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" color="#fff"
|
||||
:backgroundColor="scrollTop < 20 ?``:primaryColor" :leftIcon="options.notice?'iconshouye':'icon-left'"
|
||||
title="订单详情">
|
||||
</uni-nav-bar>
|
||||
<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
|
||||
<image mode="aspectFill" lazy-load class="common-bg abs" src="https://lbqny.migugu.com/admin/farm/bg-cash.png">
|
||||
</image>
|
||||
<view class="pl-lg pr-lg c-base" style="height: 120rpx;">
|
||||
<view class="f-sm-title text-bold pt-md">{{statusType[detail.pay_type]}}</view>
|
||||
<view class="f-caption" v-if="detail.pay_type == 1">请在<min-countdown :targetTime="over_time_text"
|
||||
color="#fff" @callback="countEnd">
|
||||
</min-countdown>内完成支付，逾期未支付将自动取消</view>
|
||||
</view>
|
||||
<view class="order-text-info ml-md mr-md pd-lg fill-base f-paragraph c-title box-shadow radius-24"
|
||||
v-if="detail.send_type == 2">
|
||||
<view @tap.stop="toMap" class="flex-warp">
|
||||
<i class="iconfont icon-dingwei mr-sm" style="font-size: 28rpx;margin-top: 6rpx;"></i>
|
||||
<view class="flex-1">{{`${detail.address_info.address}${detail.address_info.address_info}`}}</view>
|
||||
</view>
|
||||
<view @tap.stop="$util.goUrl({url:detail.address_info.mobile,openType:'call'})"
|
||||
class="flex-y-baseline c-caption" style="margin:5rpx 0 0 38rpx;">{{detail.address_info.user_name}}
|
||||
<view class="ml-lg">
|
||||
{{detail.address_info.mobile}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-text-info mt-md ml-md mr-md pl-lg pr-lg fill-base f-paragraph c-title box-shadow radius-24">
|
||||
<view class="flex-between pt-lg pb-lg">
|
||||
<view class="text c-desc">{{detail.send_type == 1 ? '自提时间':'配送时间'}}</view>
|
||||
<view>{{detail.user_send_time}}</view>
|
||||
</view>
|
||||
<view class="pt-lg pb-lg b-1px-t" v-if="detail.text">
|
||||
<view class="text c-desc">备注</view>
|
||||
<view class="mt-sm">
|
||||
<text decode="emsp" style="word-break:break-all;">{{detail.text}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-md ml-md mr-md pd-lg fill-base f-paragraph c-title box-shadow radius-24">
|
||||
<view @tap="$util.goUrl({url:`/shop/pages/store?id=${detail.store_info.id}`})"
|
||||
class="flex-y-center pb-lg b-1px-b">
|
||||
<i class="iconfont icon-dianpu mr-sm"></i>
|
||||
<view class="f-title c-title text-bold ellipsis">{{detail.store_info.title}}</view>
|
||||
<i class="iconfont icon-right"></i>
|
||||
</view>
|
||||
<view class="order-item flex-center" :class="[{'mt-lg':index==0},{'mt-md':index!=0}]"
|
||||
v-for="(item,index) in detail.order_goods" :key="index">
|
||||
<image mode="aspectFill" lazy-load class="avatar box-shadow-mini radius-24" :src="item.goods_cover">
|
||||
</image>
|
||||
<view class="flex-1 ml-lg">
|
||||
<view class="f-paragraph c-title text-bold max-490 ellipsis"> {{item.goods_name}}
|
||||
</view>
|
||||
<view class="f-caption c-title" :class="[{'flex-center':item.refund_num*1>0}]">
|
||||
<view class="ellipsis" :style="{maxWidth:item.refund_num*1>0?'300rpx':'490rpx'}">
|
||||
{{item.spe_name}}
|
||||
</view>
|
||||
<view class="flex-1 c-warning text-right" v-if="item.refund_num*1>0">已退x{{item.refund_num}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-y-baseline mt-sm">
|
||||
<view class="flex-1 f-paragraph c-warning">¥{{item.goods_price}} </view>
|
||||
<view class="f-caption c-caption">x {{item.goods_num}} </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-lg pt-lg pb-lg f-paragraph c-title b-1px-tb">
|
||||
<view class="flex-between">
|
||||
<view>商品金额</view>
|
||||
<view>¥{{detail.init_goods_price}}</view>
|
||||
</view>
|
||||
<block v-if="detail.send_type == 2">
|
||||
<view class="flex-between mt-sm">
|
||||
<view>配送费</view>
|
||||
<view>¥{{detail.freight}}</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="flex-between mt-sm" v-if="detail.kill_discount_price*1>0">
|
||||
<view>秒杀优惠</view>
|
||||
<view class="c-warning">-¥{{detail.kill_discount_price}}</view>
|
||||
</view>
|
||||
<view class="flex-between mt-sm" v-if="detail.integral_discount_price*1>0">
|
||||
<view>积分抵扣</view>
|
||||
<view class="c-warning">-¥{{detail.integral_discount_price}}</view>
|
||||
</view>
|
||||
<view class="flex-between mt-sm" v-if="detail.discount*1>0">
|
||||
<view>卡券优惠</view>
|
||||
<view class="c-warning">-¥{{detail.discount}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-lg f-paragraph c-title flex-between mt-sm">
|
||||
<view>合计</view>
|
||||
<view class="f-title c-warning text-bold">¥{{detail.pay_price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<video class="item-video mt-md ml-md mr-md radius-24" style="overflow: hidden;" :loop="false" enable-play-gesture enable-progress-gesture
|
||||
:src="detail.video" @waiting="onWaiting" @progress="onProgress" @loadedmetadata="onLoadedMetaData"
|
||||
v-if="detail.video">
|
||||
</video>
|
||||
<view class="order-text-info mt-md ml-md mr-md pd-lg fill-base f-caption c-title box-shadow radius-24">
|
||||
<view class="flex-warp pt-sm">
|
||||
<view class="text c-caption">订单编号</view>
|
||||
<view class="flex-1 flex-y-center">{{detail.order_code}}
|
||||
<view @tap="$util.goUrl( {url:`${detail.order_code}`,openType:'copy'})"
|
||||
class="copy-btn sm flex-center fill-body" :style="{color:primaryColor}">复制</view>
|
||||
</view>
|
||||
</view>
|
||||
<block v-if="detail.send_type == 2">
|
||||
<view class="flex-warp pt-md" v-if="detail.transaction_id">
|
||||
<view class="text c-caption">付款单号</view>
|
||||
<view class="flex-1 flex-y-center">{{detail.transaction_id}}
|
||||
<view @tap="$util.goUrl( {url:`${detail.transaction_id}`,openType:'copy'})"
|
||||
class="copy-btn sm flex-center fill-body" :style="{color:primaryColor}">复制</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-warp pt-md" v-if="detail.pay_type == -1 && detail.refund_code">
|
||||
<view class="text c-caption">退款单号</view>
|
||||
<view class="flex-1 flex-y-center">{{detail.refund_code}}
|
||||
<view @tap="$util.goUrl( {url:`${detail.refund_code}`,openType:'copy'})"
|
||||
class="copy-btn sm flex-center fill-body" :style="{color:primaryColor}">复制</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="flex-warp pt-md">
|
||||
<view class="text c-caption">下单时间</view>
|
||||
<view class="flex-1">{{detail.create_time}}</view>
|
||||
</view>
|
||||
<block v-if="detail.send_type == 2">
|
||||
<view class="flex-warp pt-md" v-if="detail.pay_time">
|
||||
<view class="text c-caption">支付时间</view>
|
||||
<view class="flex-1">{{detail.pay_time}}</view>
|
||||
</view>
|
||||
<view class="flex-warp pt-md">
|
||||
<view class="text c-caption">支付方式</view>
|
||||
<view class="flex-1">{{payType[detail.pay_model]}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<view class="order-text-info mt-md ml-md mr-md pd-lg fill-base f-caption c-title box-shadow radius-24"
|
||||
v-if="detail.pay_type == 7">
|
||||
<view class="flex-warp pt-sm" v-if="detail.hx_time">
|
||||
<view class="text c-caption">收货时间</view>
|
||||
<view class="flex-1">{{detail.hx_time}}</view>
|
||||
</view>
|
||||
<view class="flex-warp pt-md">
|
||||
<view class="text c-caption">收货人</view>
|
||||
<view class="flex-1">{{detail.hx_user_name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="space-max-footer"></view>
|
||||
|
||||
<view class="footer-btn fix fill-base pl-lg pr-lg"
|
||||
v-if="detail.pay_type==1 || (detail.pay_type == 2 && detail.can_refund) || detail.pay_type == 3 || (detail.pay_type == 7 && (detail.can_refund || !detail.have_eva))">
|
||||
|
||||
<view class="flex-between">
|
||||
<view></view>
|
||||
<view class="flex-y-center" v-if="detail.pay_type == 1">
|
||||
<view @tap.stop="toChangeOrder('cancel_item')"
|
||||
class="common-btn disabled flex-center f-caption c-title radius">取消订单
|
||||
</view>
|
||||
<view @tap.stop="toPay" class="common-btn flex-center f-caption c-base radius ml-lg"
|
||||
:style="{background:primaryColor}">去支付
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-y-center" v-if="detail.pay_type == 2">
|
||||
<view @tap.stop="toRefund" class="common-btn disabled flex-center f-caption c-title radius"
|
||||
v-if="detail.can_refund">申请退款
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-y-center" v-if="detail.pay_type == 3">
|
||||
<view @tap.stop="toRefund" class="common-btn disabled flex-center f-caption c-title radius"
|
||||
v-if="detail.can_refund">申请退款
|
||||
</view>
|
||||
<view @tap.stop="toChangeOrder('end_item')"
|
||||
class="common-btn flex-center f-caption c-base radius ml-lg" :style="{background:primaryColor}">
|
||||
确认收货
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-y-center" v-if="detail.pay_type == 7 && (detail.can_refund || !detail.have_eva)">
|
||||
<view @tap.stop="toRefund(index)" class="common-btn disabled flex-center f-caption c-title radius"
|
||||
v-if="detail.can_refund">申请退款
|
||||
</view>
|
||||
<view @tap.stop="toEvaluate" class="common-btn flex-center f-caption c-base radius ml-lg"
|
||||
:style="{background:primaryColor}" v-if="!detail.have_eva">去评价
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="space-safe"></view>
|
||||
</view>
|
||||
|
||||
<common-popup @confirm="confirmUpdate" ref="cancel_item" type="CANCEL_ORDER" :info="popupInfo"></common-popup>
|
||||
<common-popup @confirm="confirmUpdate" ref="end_item" type="END_ORDER" :info="popupInfo"></common-popup>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions,
|
||||
mapMutations
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
options: {},
|
||||
detail: {},
|
||||
payType: {
|
||||
1: '微信支付',
|
||||
2: '余额支付',
|
||||
3: '支付宝支付'
|
||||
},
|
||||
statusType: {
|
||||
'-1': '已取消',
|
||||
1: '待支付',
|
||||
2: '待发货',
|
||||
3: '待收货',
|
||||
7: '已完成',
|
||||
},
|
||||
sendType: {
|
||||
1: '自提',
|
||||
2: '快递'
|
||||
},
|
||||
param: {
|
||||
page: 1,
|
||||
},
|
||||
list: {
|
||||
data: []
|
||||
},
|
||||
loading: true,
|
||||
popupInfo: {},
|
||||
lockTap: false
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
userInfo: state => state.user.userInfo,
|
||||
haveOperItem: state => state.order.haveOperItem,
|
||||
over_time_text() {
|
||||
return new Date().getTime() + this.detail.over_time * 1000
|
||||
}
|
||||
}),
|
||||
onLoad(options) {
|
||||
let {
|
||||
notice = 0
|
||||
} = options
|
||||
options.notice = notice
|
||||
this.options = options
|
||||
this.$util.showLoading()
|
||||
this.updateOrderItem({
|
||||
key: 'haveOperItem',
|
||||
val: false
|
||||
})
|
||||
this.initIndex()
|
||||
},
|
||||
onUnload() {
|
||||
if (!this.haveOperItem) return
|
||||
this.$util.back()
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getConfigInfo']),
|
||||
...mapMutations(['updateOrderItem']),
|
||||
async initIndex() {
|
||||
let {
|
||||
id,
|
||||
} = this.options
|
||||
let data = await this.$api.shop.orderInfo({
|
||||
id
|
||||
})
|
||||
this.detail = data
|
||||
this.$util.hideAll()
|
||||
},
|
||||
initRefresh() {
|
||||
this.initIndex()
|
||||
},
|
||||
countEnd() {
|
||||
this.$util.log("倒计时完了")
|
||||
setTimeout(() => {
|
||||
this.initRefresh()
|
||||
this.$util.back()
|
||||
}, 1000)
|
||||
},
|
||||
onWaiting(e) {},
|
||||
onProgress(e) {},
|
||||
onLoadedMetaData(e) {},
|
||||
async toMap() {
|
||||
let {
|
||||
lat,
|
||||
lng,
|
||||
address
|
||||
} = this.detail
|
||||
await this.$util.checkAuth({
|
||||
type: 'userLocation'
|
||||
})
|
||||
await uni.getLocation({
|
||||
type: 'gcj02',
|
||||
})
|
||||
await uni.openLocation({
|
||||
latitude: lat * 1,
|
||||
longitude: lng * 1,
|
||||
name: address,
|
||||
scale: 28
|
||||
})
|
||||
},
|
||||
// 取消订单/确认收货
|
||||
async toChangeOrder(key) {
|
||||
let {
|
||||
id,
|
||||
order_code,
|
||||
order_goods,
|
||||
} = this.detail
|
||||
let {
|
||||
goods_cover: image,
|
||||
} = order_goods[0]
|
||||
this.popupInfo = {
|
||||
id,
|
||||
name: `订单编号：${order_code}`,
|
||||
image,
|
||||
refs_key: key,
|
||||
}
|
||||
this.$refs[key].open()
|
||||
},
|
||||
async confirmUpdate() {
|
||||
let {
|
||||
id,
|
||||
refs_key,
|
||||
} = this.popupInfo
|
||||
if (this.lockTap) return;
|
||||
this.lockTap = true;
|
||||
this.$util.showLoading()
|
||||
let methodModel = {
|
||||
'cancel_item': {
|
||||
method: 'cancelOrder',
|
||||
pay_type: -1,
|
||||
msg: '取消成功'
|
||||
},
|
||||
'end_item': {
|
||||
method: 'endOrder',
|
||||
pay_type: 7,
|
||||
msg: '收货成功'
|
||||
},
|
||||
}
|
||||
try {
|
||||
let {
|
||||
method,
|
||||
pay_type,
|
||||
msg
|
||||
} = methodModel[refs_key]
|
||||
await this.$api.shop[method]({
|
||||
id
|
||||
})
|
||||
this.$util.hideAll()
|
||||
this.$util.showToast({
|
||||
title: msg
|
||||
})
|
||||
this.lockTap = false
|
||||
this.initRefresh()
|
||||
this.$refs[refs_key].close()
|
||||
this.updateOrderItem({
|
||||
key: 'haveOperItem',
|
||||
val: true
|
||||
})
|
||||
} catch (e) {
|
||||
setTimeout(() => {
|
||||
this.lockTap = false
|
||||
this.$util.hideAll()
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
// 去支付
|
||||
async toPay() {
|
||||
if (this.lockTap) return;
|
||||
this.lockTap = true;
|
||||
this.$util.showLoading()
|
||||
let {
|
||||
id,
|
||||
pay_model
|
||||
} = this.detail
|
||||
|
||||
try {
|
||||
let {
|
||||
pay_list
|
||||
} = await this.$api.shop.rePayOrder({
|
||||
id
|
||||
})
|
||||
this.$util.hideAll()
|
||||
if (pay_list) {
|
||||
if (pay_model == 3) {
|
||||
pay_list = {
|
||||
orderInfo: pay_list,
|
||||
provider: 'alipay'
|
||||
}
|
||||
}
|
||||
try {
|
||||
await this.$util.pay(pay_list)
|
||||
this.lockTap = false;
|
||||
this.detail.pay_type = 2
|
||||
this.updateOrderItem({
|
||||
key: 'haveOperItem',
|
||||
val: true
|
||||
})
|
||||
} catch (e) {
|
||||
this.lockTap = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
setTimeout(() => {
|
||||
this.lockTap = false
|
||||
this.$util.hideAll()
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
// 申请退款
|
||||
toRefund() {
|
||||
let {
|
||||
id
|
||||
} = this.detail
|
||||
let url = `/shop/pages/order/refund?id=${id}`
|
||||
this.$util.goUrl({
|
||||
url
|
||||
})
|
||||
},
|
||||
// 去评价
|
||||
toEvaluate() {
|
||||
let {
|
||||
id
|
||||
} = this.detail
|
||||
let url = `/mine/pages/evaluate/edit?id=${id}&type=shop`
|
||||
this.$util.goUrl({
|
||||
url
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.shop-order-detail {
|
||||
.order-seed-item {
|
||||
.seed-img {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.item-video {
|
||||
width: 710rpx;
|
||||
height: 380rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
|
||||
.flex-between {
|
||||
height: 98rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
373
uniapp/uni-app/shop/pages/order/list.vue
Normal file
373
uniapp/uni-app/shop/pages/order/list.vue
Normal file
@@ -0,0 +1,373 @@
|
||||
<template>
|
||||
<view class="shop-order-list">
|
||||
<fixed>
|
||||
<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex" :activeColor="primaryColor"
|
||||
:width="100/tabList.length + '%'" height="100rpx"></tab>
|
||||
<view class="b-1px-b"></view>
|
||||
</fixed>
|
||||
<view @tap.stop="goDetail(index)" class="fill-base mt-md ml-md mr-md pd-lg box-shadow-mini radius-16"
|
||||
v-for="(item,index) in list.data" :key="index">
|
||||
<view class="flex-between pb-lg">
|
||||
<view @tap.stop="goStore(index)" class="flex-y-center">
|
||||
<i class="iconfont icon-dianpu mr-sm"></i>
|
||||
<view class="f-title c-title text-bold max-446 ellipsis">{{item.store_info.title}}</view>
|
||||
<i class="iconfont icon-right"></i>
|
||||
</view>
|
||||
<view class="f-paragraph c-title"
|
||||
:class="[{'c-warning': item.pay_type < 3 && item.pay_type != -1},{'c-success': item.pay_type == 3}]">
|
||||
{{statusType[item.pay_type]}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-item flex-center" :class="[{'mt-md':aindex!=0}]"
|
||||
v-for="(aitem,aindex) in item.order_goods" :key="aindex">
|
||||
<image mode="aspectFill" lazy-load class="avatar box-shadow-mini radius-24" :src="aitem.goods_cover">
|
||||
</image>
|
||||
<view class="flex-1 ml-lg">
|
||||
<view class="f-paragraph c-title text-bold max-490 ellipsis"> {{aitem.goods_name}}
|
||||
</view>
|
||||
<view class="f-caption c-title" :class="[{'flex-center':aitem.refund_num*1>0}]">
|
||||
<view class="ellipsis" :style="{maxWidth:aitem.refund_num*1>0?'300rpx':'490rpx'}">
|
||||
{{aitem.spe_name}}
|
||||
</view>
|
||||
<view class="flex-1 c-warning text-right" v-if="aitem.refund_num*1>0">已退x{{aitem.refund_num}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-y-baseline mt-sm">
|
||||
<view class="flex-1 f-paragraph c-warning">¥{{aitem.goods_price}} </view>
|
||||
<view class="f-caption c-caption">x {{aitem.goods_num}} </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-between mt-lg pt-md b-1px-t">
|
||||
<view class="c-title ml-sm mr-sm"> {{`共${item.all_goods_num}件`}}</view>
|
||||
<view class="flex-y-baseline f-desc c-title"> 实付：
|
||||
<view class="f-title c-warning">¥{{item.true_price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-between mt-md"
|
||||
v-if="item.pay_type==1 || (item.pay_type == 2 && item.can_refund ) || item.pay_type == 3 || (item.pay_type == 7 && (item.can_refund || !item.have_eva))">
|
||||
<view></view>
|
||||
<view class="flex-warp" v-if="item.pay_type == 1">
|
||||
<view @tap.stop="toChangeOrder(index,'cancel_item')"
|
||||
class="common-btn disabled flex-center f-caption c-title radius-4">取消订单
|
||||
</view>
|
||||
<view @tap.stop="toPay(index)" class="common-btn flex-center f-caption c-base radius-4 ml-lg"
|
||||
:style="{background:primaryColor}">去支付
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-warp" v-if="item.pay_type == 2">
|
||||
<view @tap.stop="toRefund(index)" class="common-btn disabled flex-center f-caption c-title radius-4"
|
||||
v-if="item.can_refund">申请退款
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-warp" v-if="item.pay_type == 3">
|
||||
<view @tap.stop="toRefund(index)" class="common-btn disabled flex-center f-caption c-title radius-4"
|
||||
v-if="item.can_refund">申请退款
|
||||
</view>
|
||||
<view @tap.stop="toChangeOrder(index,'end_item')"
|
||||
class="common-btn flex-center f-caption c-base radius-4 ml-lg"
|
||||
:style="{background:primaryColor}">确认收货
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-warp" v-if="item.pay_type == 7 && (item.can_refund || !item.have_eva)">
|
||||
<view @tap.stop="toRefund(index)" class="common-btn disabled flex-center f-caption c-title radius-4"
|
||||
v-if="item.can_refund">申请退款
|
||||
</view>
|
||||
<view @tap.stop="toEvaluate(index)" class="common-btn flex-center f-caption c-base radius-4 ml-lg"
|
||||
:style="{background:primaryColor}" v-if="!item.have_eva">去评价
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
|
||||
</load-more>
|
||||
<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
|
||||
|
||||
<view class="space-footer"></view>
|
||||
|
||||
<common-popup @confirm="confirmUpdate" ref="cancel_item" type="CANCEL_ORDER" :info="popupInfo"></common-popup>
|
||||
<common-popup @confirm="confirmUpdate" ref="end_item" type="END_ORDER" :info="popupInfo"></common-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
activeIndex: 0,
|
||||
tabList: [{
|
||||
id: 0,
|
||||
title: '全部'
|
||||
}, {
|
||||
id: 1,
|
||||
title: '待支付',
|
||||
number: 0
|
||||
}, {
|
||||
id: 2,
|
||||
title: '待发货',
|
||||
number: 0
|
||||
}, {
|
||||
id: 3,
|
||||
title: '待收货',
|
||||
number: 0
|
||||
}, {
|
||||
id: 7,
|
||||
title: '已完成'
|
||||
}],
|
||||
statusType: {
|
||||
'-1': '已取消',
|
||||
1: '待支付',
|
||||
2: '待发货',
|
||||
3: '待收货',
|
||||
7: '已完成',
|
||||
},
|
||||
param: {
|
||||
page: 1,
|
||||
},
|
||||
list: {
|
||||
data: []
|
||||
},
|
||||
loading: true,
|
||||
popupInfo: {},
|
||||
lockTap: false
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
userInfo: state => state.user.userInfo,
|
||||
}),
|
||||
onLoad(options) {
|
||||
this.$util.showLoading()
|
||||
this.options = options
|
||||
let {
|
||||
tab = 0
|
||||
} = options
|
||||
this.activeIndex = tab
|
||||
this.initIndex()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.showNavigationBarLoading()
|
||||
// #endif
|
||||
this.initRefresh()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.list.current_page >= this.list.last_page || this.loading) return
|
||||
this.param.page = this.param.page + 1
|
||||
this.loading = true
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
initIndex() {
|
||||
this.getList()
|
||||
},
|
||||
initRefresh() {
|
||||
this.param.page = 1
|
||||
this.initIndex()
|
||||
},
|
||||
async getList() {
|
||||
let {
|
||||
list: oldList,
|
||||
param,
|
||||
tabList,
|
||||
activeIndex
|
||||
} = this
|
||||
param.pay_type = tabList[activeIndex].id
|
||||
let newList = await this.$api.shop.orderList(param);
|
||||
|
||||
if (this.param.page == 1) {
|
||||
this.list = newList
|
||||
} else {
|
||||
newList.data = oldList.data.concat(newList.data)
|
||||
this.list = newList
|
||||
}
|
||||
this.loading = false
|
||||
this.tabList[1].number = newList.no_pay_count
|
||||
this.tabList[2].number = newList.no_send_count
|
||||
this.tabList[3].number = newList.have_send_count
|
||||
this.$util.hideAll()
|
||||
},
|
||||
handerTabChange(index) {
|
||||
this.activeIndex = index
|
||||
this.$util.showLoading()
|
||||
this.param.page = 1
|
||||
this.list.data = []
|
||||
this.getList()
|
||||
},
|
||||
// 取消订单/确认收货
|
||||
async toChangeOrder(index, key) {
|
||||
let {
|
||||
id,
|
||||
order_code,
|
||||
order_goods,
|
||||
} = this.list.data[index]
|
||||
let {
|
||||
goods_cover: image,
|
||||
} = order_goods[0]
|
||||
this.popupInfo = {
|
||||
id,
|
||||
name: `订单编号：${order_code}`,
|
||||
image,
|
||||
index,
|
||||
refs_key: key,
|
||||
}
|
||||
this.$refs[key].open()
|
||||
},
|
||||
async confirmUpdate() {
|
||||
let {
|
||||
id,
|
||||
index,
|
||||
refs_key,
|
||||
} = this.popupInfo
|
||||
if (this.lockTap) return;
|
||||
this.lockTap = true;
|
||||
this.$util.showLoading()
|
||||
let methodModel = {
|
||||
'cancel_item': {
|
||||
method: 'cancelOrder',
|
||||
pay_type: -1,
|
||||
msg: '取消成功',
|
||||
ind: 1
|
||||
},
|
||||
'end_item': {
|
||||
method: 'endOrder',
|
||||
pay_type: 7,
|
||||
msg: '收货成功',
|
||||
ind: 3
|
||||
}
|
||||
}
|
||||
try {
|
||||
let {
|
||||
method,
|
||||
pay_type,
|
||||
msg,
|
||||
ind
|
||||
} = methodModel[refs_key]
|
||||
await this.$api.shop[method]({
|
||||
id
|
||||
})
|
||||
this.$util.hideAll()
|
||||
if (this.activeIndex == 0) {
|
||||
this.list.data[index].pay_type = pay_type
|
||||
if (pay_type == 7) {
|
||||
this.list.data[index].can_refund = 1
|
||||
}
|
||||
} else {
|
||||
this.list.data.splice(index, 1)
|
||||
}
|
||||
this.$util.showToast({
|
||||
title: msg
|
||||
})
|
||||
this.lockTap = false
|
||||
this.$refs[refs_key].close()
|
||||
let {
|
||||
number
|
||||
} = this.tabList[ind]
|
||||
this.tabList[ind].number = number - 1
|
||||
} catch (e) {
|
||||
setTimeout(() => {
|
||||
this.lockTap = false
|
||||
this.$util.hideAll()
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
// 去支付
|
||||
async toPay(index) {
|
||||
if (this.lockTap) return;
|
||||
this.lockTap = true;
|
||||
this.$util.showLoading()
|
||||
let {
|
||||
id,
|
||||
pay_model
|
||||
} = this.list.data[index]
|
||||
|
||||
try {
|
||||
let {
|
||||
pay_list
|
||||
} = await this.$api.shop.rePayOrder({
|
||||
id
|
||||
})
|
||||
this.$util.hideAll()
|
||||
if (pay_list) {
|
||||
if (pay_model == 3) {
|
||||
pay_list = {
|
||||
orderInfo: pay_list,
|
||||
provider: 'alipay'
|
||||
}
|
||||
}
|
||||
try {
|
||||
await this.$util.pay(pay_list)
|
||||
this.lockTap = false;
|
||||
if (this.activeIndex == 0) {
|
||||
this.list.data[index].pay_type = 2
|
||||
} else {
|
||||
this.list.data.splice(index, 1)
|
||||
}
|
||||
} catch (e) {
|
||||
this.lockTap = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
setTimeout(() => {
|
||||
this.lockTap = false
|
||||
this.$util.hideAll()
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
// 申请退款
|
||||
toRefund(index) {
|
||||
let {
|
||||
id
|
||||
} = this.list.data[index]
|
||||
let url = `/shop/pages/order/refund?id=${id}`
|
||||
this.$util.goUrl({
|
||||
url
|
||||
})
|
||||
},
|
||||
// 去评价
|
||||
toEvaluate(index) {
|
||||
let {
|
||||
id
|
||||
} = this.list.data[index]
|
||||
let url = `/mine/pages/evaluate/edit?id=${id}&type=shop`
|
||||
this.$util.goUrl({
|
||||
url
|
||||
})
|
||||
},
|
||||
// 订单详情
|
||||
goDetail(index) {
|
||||
let {
|
||||
id
|
||||
} = this.list.data[index]
|
||||
let url = `/shop/pages/order/detail?id=${id}`
|
||||
this.$util.goUrl({
|
||||
url
|
||||
})
|
||||
},
|
||||
// 店铺详情
|
||||
goStore(index) {
|
||||
let {
|
||||
id
|
||||
} = this.list.data[index].store_info
|
||||
let url = `/shop/pages/store?id=${id}`
|
||||
this.$util.goUrl({
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
386
uniapp/uni-app/shop/pages/order/refund.vue
Normal file
386
uniapp/uni-app/shop/pages/order/refund.vue
Normal file
@@ -0,0 +1,386 @@
|
||||
<template>
|
||||
<view class="user-order-refund" v-if="detail.id">
|
||||
<view class="fill-base mt-md ml-md mr-md pd-lg radius-34">
|
||||
<view class="flex-between pb-lg b-1px-b">
|
||||
<view class="flex-y-center">
|
||||
<i class="iconfont icon-dianpu mr-sm"></i>
|
||||
<view class="f-title c-title text-bold max-446 ellipsis">{{detail.store_info.title}}</view>
|
||||
</view>
|
||||
<view class="f-paragraph c-title"
|
||||
:class="[{'c-warning': detail.pay_type < 3 && detail.pay_type != -1},{'c-success': detail.pay_type == 3}]">
|
||||
{{statusType[detail.pay_type]}}
|
||||
</view>
|
||||
</view>
|
||||
<block v-for="(item,index) in detail.order_goods" :key="index">
|
||||
<view @tap="handerRadioChange(index)" class="item-child flex-warp"
|
||||
:class="[{'mt-lg':index==0},{'mt-md':index!=0}]">
|
||||
<i class="iconfont flex-y-center mr-md"
|
||||
:class="[{'icon-xuanze':!item.checked},{'icon-xuanze-fill':item.checked}]"
|
||||
:style="{color:item.checked ? primaryColor : ''}"></i>
|
||||
<image mode="aspectFill" lazy-load class="goods-img box-shadow-mini radius-16"
|
||||
:src="item.goods_cover">
|
||||
</image>
|
||||
<view class="flex-1 ml-lg">
|
||||
<view class="f-paragraph c-title text-bold ellipsis"> {{item.goods_name}} </view>
|
||||
<view class="f-caption c-title ellipsis"> {{item.spe_name}} </view>
|
||||
<view class="f-caption c-warning mt-sm" v-if="item.integral_id">{{item.integral}}积分</view>
|
||||
<view class="flex-y-baseline mt-sm">
|
||||
<view class="flex-1 f-paragraph c-warning">¥{{item.singe_pay_price}} </view>
|
||||
<view class="flex-warp" v-if="item.can_refund_num > 1">
|
||||
<view class="add-remove-item flex-center">
|
||||
<i @tap.stop="changeNum(index,-1)"
|
||||
class="iconfont icon-remove-circle c-caption"></i>
|
||||
<view class="number flex-center f-desc pl-sm pr-sm">{{item.apply_num}}
|
||||
</view>
|
||||
<i @tap.stop="changeNum(index,1)" class="iconfont icon-add-circle"
|
||||
:style="{color:primaryColor}"></i>
|
||||
</view>
|
||||
</view>
|
||||
<block v-else>
|
||||
<view class="c-paragraph">x{{item.apply_num}}</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="mt-lg pt-lg pb-lg f-paragraph c-title b-1px-tb">
|
||||
<view class="flex-between">
|
||||
<view>商品金额</view>
|
||||
<view>¥{{detail.can_refund_price}}</view>
|
||||
</view>
|
||||
<block v-if="detail.send_type == 2">
|
||||
<view class="flex-between mt-sm">
|
||||
<view class="flex-y-baseline">配送费<view class="f-icontext c-warning ml-sm">发货前全部商品退款将退还</view>
|
||||
</view>
|
||||
<view>¥{{detail.freight}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="mt-lg f-paragraph c-title flex-between mt-sm">
|
||||
<view>合计</view>
|
||||
<view class="f-title c-warning text-bold">
|
||||
{{total_refund_integral?`${total_refund_integral}积分+${total_refund_price}元`:`${total_refund_price}元`}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="item-child mg-big pd-lg fill-base radius-34">
|
||||
<view class="f-title c-title text-bold pb-lg">退款原因</view>
|
||||
<view class="fill-body f-paragraph c-title radius-34">
|
||||
<textarea v-on:input="subForm.text = subForm.text.length>200?subForm.text.substring(0,200):subForm.text"
|
||||
v-model="subForm.text" class="pd-lg f-paragraph" style="width: 580rpx;" maxlength="200"
|
||||
placeholder="请输入退款原因" placeholder-class="c-title" />
|
||||
<view class="text-right pb-lg pr-lg">{{`${subForm.text.length}/200`}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="item-child mg-big pd-lg fill-base radius-34">
|
||||
<view class="f-title c-title text-bold">上传图片</view>
|
||||
<view class="mt-sm">
|
||||
<upload @del="imgUpload" @upload="imgUpload" :imagelist="subForm.imgs" imgtype="imgs" text="添加照片"
|
||||
:imgsize="5"></upload>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="space-max-footer"></view>
|
||||
|
||||
<view class="refund-bottom-info fill-base fix pl-lg pr-lg">
|
||||
<view class="flex-between">
|
||||
<view @tap="selectAllItem" class="flex-y-center"><i class="iconfont mr-sm"
|
||||
:class="[{'icon-xuanze':!selectAll},{'icon-xuanze-fill':selectAll}]"
|
||||
:style="{color:selectAll?primaryColor : ''}"></i>
|
||||
全选
|
||||
</view>
|
||||
<view class="text-right flex-center">
|
||||
<view class="flex-y-center">
|
||||
<view class="f-caption c-caption mr-sm">共{{total_refund_num}}件</view>
|
||||
退款金额<view class="flex-y-baseline f-caption c-warning">¥<view class="f-title text-bold">
|
||||
{{total_refund_price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view @tap.stop="toSubmit" class="common-btn flex-center ml-lg f-paragraph c-base radius"
|
||||
:style="{background:primaryColor}">提交申请</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="space-safe"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
detail: {},
|
||||
statusType: {
|
||||
'-1': '已取消',
|
||||
1: '待支付',
|
||||
2: '待发货',
|
||||
3: '待收货',
|
||||
7: '已完成',
|
||||
},
|
||||
total_refund_num: 0,
|
||||
total_refund_integral: 0,
|
||||
total_refund_price: 0,
|
||||
selectAll: false,
|
||||
selectAdd: false,
|
||||
subForm: {
|
||||
text: '',
|
||||
imgs: []
|
||||
},
|
||||
lockTap: false
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
}),
|
||||
onLoad(options) {
|
||||
this.options = options
|
||||
this.initIndex()
|
||||
},
|
||||
onUnload() {
|
||||
this.$util.back()
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['updateOrderItem']),
|
||||
async initIndex() {
|
||||
let {
|
||||
id
|
||||
} = this.options
|
||||
let data = await this.$api.shop.orderInfo({
|
||||
id
|
||||
})
|
||||
let arr = []
|
||||
let can_refund_price = 0
|
||||
data.order_goods.map(item => {
|
||||
item.apply_num = item.can_refund_num
|
||||
if (item.apply_num == 0) return
|
||||
can_refund_price += item.singe_pay_price * item.apply_num
|
||||
arr.push(item)
|
||||
})
|
||||
data.can_refund_price = can_refund_price.toFixed(2)
|
||||
data.order_goods = arr
|
||||
this.detail = data
|
||||
},
|
||||
initRefresh() {
|
||||
this.initIndex()
|
||||
},
|
||||
imgUpload(e) {
|
||||
let {
|
||||
imagelist,
|
||||
imgtype
|
||||
} = e;
|
||||
this.subForm[imgtype] = imagelist;
|
||||
},
|
||||
handerRadioChange(index) {
|
||||
let item = this.detail.order_goods[index];
|
||||
let newChecked = !item.checked;
|
||||
this.detail.order_goods[index].checked = newChecked;
|
||||
this.checkIsSelectAll();
|
||||
},
|
||||
handerAddRadioChange() {
|
||||
this.selectAdd = !this.selectAdd
|
||||
this.checkIsSelectAll()
|
||||
},
|
||||
async changeNum(index, mod) {
|
||||
let item = this.detail.order_goods[index];
|
||||
let num = item.apply_num + mod;
|
||||
if (num < 1) {
|
||||
this.$util.showToast({
|
||||
title: `此商品最少可退1件`
|
||||
})
|
||||
return;
|
||||
}
|
||||
if (num > item.can_refund_num) {
|
||||
this.$util.showToast({
|
||||
title: `此商品最多可退${item.can_refund_num}件`
|
||||
})
|
||||
return;
|
||||
}
|
||||
this.detail.order_goods[index].apply_num = num;
|
||||
this.countPrice();
|
||||
},
|
||||
selectAllItem() {
|
||||
this.detail.order_goods.map((item) => {
|
||||
item.checked = !this.selectAll
|
||||
})
|
||||
this.checkIsSelectAll();
|
||||
},
|
||||
checkIsSelectAll() {
|
||||
let list = []
|
||||
this.detail.order_goods.map(item => {
|
||||
list.push(item)
|
||||
})
|
||||
this.selectAll = list.every((item) => {
|
||||
return item.checked
|
||||
})
|
||||
this.countPrice();
|
||||
},
|
||||
countPrice() {
|
||||
let price = 0
|
||||
let num = 0
|
||||
let integral = 0
|
||||
let list = []
|
||||
this.detail.order_goods.map(item => {
|
||||
list.push(item)
|
||||
})
|
||||
list.map(item => {
|
||||
if (item.checked) {
|
||||
num += item.apply_num
|
||||
integral += item.integral * item.apply_num
|
||||
price += item.singe_pay_price * item.apply_num
|
||||
}
|
||||
})
|
||||
let {
|
||||
freight,
|
||||
pay_type,
|
||||
all_goods_num
|
||||
} = this.detail
|
||||
let freight_price = all_goods_num == num && pay_type == 2 ? freight * 1 : 0
|
||||
this.total_refund_num = num
|
||||
this.total_refund_integral = integral
|
||||
this.total_refund_price = price.toFixed(2) * 1 + freight_price
|
||||
},
|
||||
// 提交申请
|
||||
async toSubmit() {
|
||||
let {
|
||||
id: order_id,
|
||||
order_goods
|
||||
} = this.detail
|
||||
let list = []
|
||||
order_goods.filter(item => {
|
||||
if (item.checked) {
|
||||
list.push({
|
||||
id: item.id,
|
||||
num: item.apply_num
|
||||
})
|
||||
}
|
||||
})
|
||||
if (list.length < 1) {
|
||||
this.$util.showToast({
|
||||
title: `请选择商品`,
|
||||
});
|
||||
return
|
||||
}
|
||||
let param = this.$util.deepCopy(this.subForm)
|
||||
if (!param.text) {
|
||||
this.$util.showToast({
|
||||
title: `请输入退款原因`,
|
||||
});
|
||||
return
|
||||
}
|
||||
param.imgs = param.imgs.length > 0 ? param.imgs.map(item => {
|
||||
return item.path
|
||||
}) : []
|
||||
param = Object.assign({}, param, {
|
||||
order_id,
|
||||
list
|
||||
})
|
||||
|
||||
if (this.lockTap) return
|
||||
this.lockTap = true
|
||||
this.$util.showLoading()
|
||||
try {
|
||||
await this.$api.shop.applyOrder(param)
|
||||
this.$util.hideAll()
|
||||
this.$util.showToast({
|
||||
title: `提交成功`,
|
||||
});
|
||||
this.updateOrderItem({
|
||||
key: 'haveOperItem',
|
||||
val: true
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.$util.back()
|
||||
this.$util.goUrl({
|
||||
url: 1,
|
||||
openType: `navigateBack`
|
||||
})
|
||||
this.lockTap = false
|
||||
}, 1000)
|
||||
} catch (e) {
|
||||
setTimeout(() => {
|
||||
this.lockTap = false
|
||||
this.$util.hideAll()
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.user-order-refund {
|
||||
|
||||
|
||||
.item-child {
|
||||
|
||||
.icon-xuanze,
|
||||
.icon-xuanze-fill {
|
||||
font-size: 38rpx;
|
||||
height: 130rpx;
|
||||
}
|
||||
|
||||
.goods-img {
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
max-width: 412rpx;
|
||||
}
|
||||
|
||||
.goods-spe {
|
||||
height: 44rpx;
|
||||
line-height: 44rpx;
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.goods-num {
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
|
||||
.textarea-info {
|
||||
background: #F7F7F7;
|
||||
|
||||
.input-textarea {
|
||||
width: 570rpx;
|
||||
height: 300rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.refund-bottom-info {
|
||||
bottom: 0;
|
||||
min-height: 110rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 38rpx;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
height: 110rpx;
|
||||
|
||||
.order {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
311
uniapp/uni-app/shop/pages/refund/detail.vue
Normal file
311
uniapp/uni-app/shop/pages/refund/detail.vue
Normal file
@@ -0,0 +1,311 @@
|
||||
<template>
|
||||
<view class="shop-refund-detail" v-if="detail.id">
|
||||
<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" color="#fff"
|
||||
:backgroundColor="scrollTop < 20 ?``:primaryColor" leftIcon="icon-left" title="退款详情">
|
||||
</uni-nav-bar>
|
||||
<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
|
||||
<image mode="aspectFill" lazy-load class="common-bg abs" src="https://lbqny.migugu.com/admin/farm/bg-cash.png"></image>
|
||||
<view class="pl-lg pr-lg c-base" style="height: 120rpx;">
|
||||
<view class="f-sm-title text-bold pt-md">{{statusType[detail.status]}}</view>
|
||||
<view class="f-caption" v-if="detail.status == 2">退款成功，退款金额¥{{detail.refund_price}}</view>
|
||||
</view>
|
||||
|
||||
<view class="ml-md mr-md pd-lg fill-base f-paragraph c-title box-shadow radius-24">
|
||||
<view class="order-item flex-center" :class="[{'mt-md':index!=0}]"
|
||||
v-for="(item,index) in detail.order_goods" :key="index">
|
||||
<image mode="aspectFill" lazy-load class="avatar box-shadow-mini radius-24" :src="item.goods_cover">
|
||||
</image>
|
||||
<view class="flex-1 ml-lg">
|
||||
<view class="f-paragraph c-title text-bold max-490 ellipsis"> {{item.goods_name}} </view>
|
||||
<view class="f-caption c-title max-490 ellipsis">{{item.spe_name}} </view>
|
||||
<view class="flex-y-baseline mt-sm">
|
||||
<view class="flex-1 f-paragraph c-warning">¥{{item.goods_price}} </view>
|
||||
<view class="f-caption c-caption">x {{item.goods_num}} </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-between mt-lg pt-md b-1px-t">
|
||||
<view class="c-title ml-sm mr-sm"> {{`共${detail.all_goods_num}件`}}</view>
|
||||
<view class="flex-y-baseline f-desc c-title"> 合计：
|
||||
<view class="f-title c-warning">¥{{detail.apply_price}}</view>
|
||||
<view class="f-caption c-caption ml-sm" v-if="detail.car_price*1>0">含配送费：¥{{detail.car_price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-md ml-md mr-md pd-lg fill-base f-caption c-title box-shadow radius-24">
|
||||
<view class="flex-between pb-lg f-title c-title text-bold b-1px-b">退款信息</view>
|
||||
<view class="pt-lg f-desc">
|
||||
<view class="flex-column">
|
||||
<view>退款原因</view>
|
||||
<view class="c-caption mt-sm">
|
||||
<text decode="emsp" style="word-break:break-all;">{{detail.text}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-column mt-md" v-if="detail.imgs && detail.imgs.length > 0">
|
||||
<view>上传图片</view>
|
||||
<view class="flex-warp">
|
||||
<block v-for="(item,index) in detail.imgs" :key="index">
|
||||
<image mode="aspectFill" @tap.top="$util.previewImage({current:item,urls:detail.imgs})"
|
||||
class="refund-img mt-md mr-md radius-10" :src="item" />
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order-text-info mt-md ml-md mr-md pd-lg fill-base f-caption c-title box-shadow radius-24">
|
||||
<view class="flex-warp pt-sm">
|
||||
<view class="text c-caption">订单编号</view>
|
||||
<view class="flex-1 flex-y-center">{{detail.order_code}}
|
||||
<view @tap="$util.goUrl( {url:`${detail.order_code}`,openType:'copy'})"
|
||||
class="copy-btn sm flex-center fill-body" :style="{color:primaryColor}">复制</view>
|
||||
</view>
|
||||
</view>
|
||||
<block v-if="detail.send_type == 2">
|
||||
<view class="flex-warp pt-md">
|
||||
<view class="text c-caption">付款单号</view>
|
||||
<view class="flex-1 flex-y-center">{{detail.transaction_id}}
|
||||
<view @tap="$util.goUrl( {url:`${detail.transaction_id}`,openType:'copy'})"
|
||||
class="copy-btn sm flex-center fill-body" :style="{color:primaryColor}">复制</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-warp pt-md" v-if="detail.status == 2">
|
||||
<view class="text c-caption">退款单号</view>
|
||||
<view class="flex-1 flex-y-center">{{detail.out_refund_no}}
|
||||
<view @tap="$util.goUrl( {url:`${detail.out_refund_no}`,openType:'copy'})"
|
||||
class="copy-btn sm flex-center fill-body" :style="{color:primaryColor}">复制</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="flex-warp pt-md">
|
||||
<view class="text c-caption">申请时间</view>
|
||||
<view class="flex-1">{{detail.create_time}}</view>
|
||||
</view>
|
||||
<block v-if="detail.status > 1">
|
||||
<view class="flex-warp pt-md">
|
||||
<view class="text c-caption">处理时间</view>
|
||||
<view class="flex-1">{{detail.refund_time}}</view>
|
||||
</view>
|
||||
<view class="flex-warp pt-md">
|
||||
<view class="text c-caption">处理人</view>
|
||||
<view class="flex-1">{{detail.refund_user_name}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<view :class="[{'space-max-footer':detail.status == 1},{'space-footer':detail.status != 1}]"></view>
|
||||
|
||||
|
||||
<view class="footer-btn fix fill-base pl-lg pr-lg" v-if="detail.status != 2">
|
||||
<view class="flex-between">
|
||||
<view></view>
|
||||
<view class="flex-y-center">
|
||||
<view @tap.stop="toChangeOrder('cancel_item')"
|
||||
class="common-btn disabled flex-center f-caption c-title radius" v-if="detail.status == 1">
|
||||
取消退款
|
||||
</view>
|
||||
<view @tap.stop="toTel" class="common-btn flex-center f-caption c-base radius"
|
||||
:style="{background:primaryColor}" v-if="detail.status == 3">联系店主
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="space-safe"></view>
|
||||
</view>
|
||||
|
||||
<common-popup @confirm="confirmUpdate" ref="cancel_item" type="CANCEL_REFUND_ORDER" :info="popupInfo">
|
||||
</common-popup>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions,
|
||||
mapMutations
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
options: {},
|
||||
detail: {},
|
||||
payType: {
|
||||
1: '微信支付',
|
||||
2: '余额支付',
|
||||
3: '支付宝支付'
|
||||
},
|
||||
statusType: {
|
||||
1: '退款中',
|
||||
2: '退款成功',
|
||||
3: '退款失败',
|
||||
},
|
||||
sendType: {
|
||||
1: '自提',
|
||||
2: '快递'
|
||||
},
|
||||
param: {
|
||||
page: 1,
|
||||
},
|
||||
list: {
|
||||
data: []
|
||||
},
|
||||
loading: true,
|
||||
popupInfo: {},
|
||||
lockTap: false
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
userInfo: state => state.user.userInfo,
|
||||
haveOperItem: state => state.order.haveOperItem,
|
||||
}),
|
||||
onLoad(options) {
|
||||
this.options = options
|
||||
this.$util.showLoading()
|
||||
this.updateOrderItem({
|
||||
key: 'haveOperItem',
|
||||
val: false
|
||||
})
|
||||
this.initIndex()
|
||||
},
|
||||
onUnload() {
|
||||
if (!this.haveOperItem) return
|
||||
this.$util.back()
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getConfigInfo']),
|
||||
...mapMutations(['updateOrderItem']),
|
||||
async initIndex() {
|
||||
let {
|
||||
id,
|
||||
} = this.options
|
||||
let data = await this.$api.shop.refundOrderInfo({
|
||||
id
|
||||
})
|
||||
this.detail = data
|
||||
this.$util.hideAll()
|
||||
},
|
||||
initRefresh() {
|
||||
this.initIndex()
|
||||
},
|
||||
async toMap() {
|
||||
let {
|
||||
lat,
|
||||
lng,
|
||||
address
|
||||
} = this.detail
|
||||
await this.$util.checkAuth({
|
||||
type: 'userLocation'
|
||||
})
|
||||
await uni.getLocation({
|
||||
type: 'gcj02',
|
||||
})
|
||||
await uni.openLocation({
|
||||
latitude: lat * 1,
|
||||
longitude: lng * 1,
|
||||
name: address,
|
||||
scale: 28
|
||||
})
|
||||
},
|
||||
// 取消退款
|
||||
async toChangeOrder(key) {
|
||||
let {
|
||||
id,
|
||||
order_code,
|
||||
order_goods,
|
||||
} = this.detail
|
||||
let {
|
||||
goods_cover: image,
|
||||
} = order_goods[0]
|
||||
this.popupInfo = {
|
||||
id,
|
||||
name: `订单编号：${order_code}`,
|
||||
image,
|
||||
refs_key: key
|
||||
}
|
||||
this.$refs[key].open()
|
||||
},
|
||||
async confirmUpdate() {
|
||||
let {
|
||||
id,
|
||||
refs_key
|
||||
} = this.popupInfo
|
||||
if (this.lockTap) return;
|
||||
this.lockTap = true;
|
||||
this.$util.showLoading()
|
||||
let methodModel = {
|
||||
'cancel_item': {
|
||||
method: 'cancelRefundOrder',
|
||||
status: -1,
|
||||
msg: '取消成功'
|
||||
}
|
||||
}
|
||||
try {
|
||||
let {
|
||||
method,
|
||||
status,
|
||||
msg
|
||||
} = methodModel[refs_key]
|
||||
await this.$api.shop[method]({
|
||||
id
|
||||
})
|
||||
this.$util.hideAll()
|
||||
this.$util.showToast({
|
||||
title: msg
|
||||
})
|
||||
this.lockTap = false
|
||||
this.$refs[refs_key].close()
|
||||
this.updateOrderItem({
|
||||
key: 'haveOperItem',
|
||||
val: true
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.$util.goUrl({
|
||||
url: 1,
|
||||
openType: `navigateBack`
|
||||
})
|
||||
}, 1000)
|
||||
} catch (e) {
|
||||
setTimeout(() => {
|
||||
this.lockTap = false
|
||||
this.$util.hideAll()
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
// 联系店主
|
||||
toTel(index) {
|
||||
let {
|
||||
mobile: url
|
||||
} = this.detail.store_info
|
||||
this.$util.goUrl({
|
||||
url,
|
||||
openType: `call`
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.shop-refund-detail {
|
||||
|
||||
.footer-btn {
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
|
||||
.flex-between {
|
||||
height: 98rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
264
uniapp/uni-app/shop/pages/refund/list.vue
Normal file
264
uniapp/uni-app/shop/pages/refund/list.vue
Normal file
@@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<view class="mine-refund-list">
|
||||
<fixed>
|
||||
<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex" :activeColor="primaryColor"
|
||||
:width="100/tabList.length + '%'" height="100rpx"></tab>
|
||||
<view class="b-1px-b"></view>
|
||||
</fixed>
|
||||
|
||||
<view @tap.stop="goDetail(index)" class="fill-base mt-md ml-md mr-md pd-lg box-shadow-mini radius-16"
|
||||
v-for="(item,index) in list.data" :key="index">
|
||||
<view class="flex-between">
|
||||
<view class="f-paragraph c-title"
|
||||
:class="[{'c-warning': item.status == 1},{'c-success': item.status == 2}]">
|
||||
{{statusType[item.status]}}
|
||||
</view>
|
||||
<i class="iconfont icon-right"></i>
|
||||
</view>
|
||||
<view class="order-item flex-center" :class="[{'mt-lg':aindex==0},{'mt-md':aindex!=0}]"
|
||||
v-for="(aitem,aindex) in item.order_goods" :key="aindex">
|
||||
<image mode="aspectFill" lazy-load class="avatar box-shadow-mini radius-24" :src="aitem.goods_cover">
|
||||
</image>
|
||||
<view class="flex-1 ml-lg">
|
||||
<view class="f-paragraph c-title text-bold max-490 ellipsis"> {{aitem.goods_name}}
|
||||
</view>
|
||||
<view class="f-caption c-title" :class="[{'flex-center':aitem.refund_num*1>0}]">
|
||||
<view class="ellipsis" :style="{maxWidth:aitem.refund_num*1>0?'300rpx':'490rpx'}">
|
||||
{{aitem.spe_name}}
|
||||
</view>
|
||||
<view class="flex-1 c-warning text-right" v-if="aitem.refund_num*1>0">已退x{{aitem.refund_num}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-y-baseline mt-sm">
|
||||
<view class="flex-1 f-paragraph c-warning">¥{{aitem.goods_price}} </view>
|
||||
<view class="f-caption c-caption">x {{aitem.goods_num}} </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-between mt-lg pt-md b-1px-t">
|
||||
<view class="c-title ml-sm mr-sm"> {{`共${item.all_goods_num}件`}}</view>
|
||||
<view class="flex-y-baseline f-desc c-title"> 合计：
|
||||
<view class="f-title c-warning">¥{{item.apply_price}}</view>
|
||||
<view class="f-caption c-caption ml-sm" v-if="item.car_price*1>0">含配送费：¥{{item.car_price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-between" :class="[{'mt-sm':item.status == 2},{'mt-lg':item.status != 2}]">
|
||||
<view></view>
|
||||
<view @tap.stop="toChangeOrder(index,'cancel_item')"
|
||||
class="common-btn disabled flex-center f-caption c-title radius-4" v-if="item.status == 1">取消退款
|
||||
</view>
|
||||
<view class="flex-y-baseline f-desc c-desc" v-if="item.status == 2">退款金额：
|
||||
<view class="f-icontext c-title">¥</view>
|
||||
<view class="f-sm-title c-title">{{item.refund_price}}</view>
|
||||
</view>
|
||||
<view @tap.stop="toTel(index)" class="common-btn flex-center f-caption c-base radius-4 ml-lg"
|
||||
:style="{background:primaryColor}" v-if="item.status == 3">联系店主
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
|
||||
</load-more>
|
||||
<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
|
||||
|
||||
<view class="space-footer"></view>
|
||||
|
||||
<common-popup @confirm="confirmUpdate" ref="cancel_item" type="CANCEL_REFUND_ORDER" :info="popupInfo">
|
||||
</common-popup>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
activeIndex: 0,
|
||||
tabList: [{
|
||||
id: 0,
|
||||
title: '全部'
|
||||
}, {
|
||||
id: 1,
|
||||
title: '退款中',
|
||||
number: 0,
|
||||
}, {
|
||||
id: 2,
|
||||
title: '退款成功',
|
||||
}, {
|
||||
id: 3,
|
||||
title: '退款失败',
|
||||
}],
|
||||
statusType: {
|
||||
1: '退款中',
|
||||
2: '退款成功',
|
||||
3: '退款失败',
|
||||
},
|
||||
param: {
|
||||
page: 1,
|
||||
},
|
||||
list: {
|
||||
data: []
|
||||
},
|
||||
loading: true,
|
||||
popupInfo: {},
|
||||
lockTap: false
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
userInfo: state => state.user.userInfo,
|
||||
}),
|
||||
onLoad(options) {
|
||||
this.$util.showLoading()
|
||||
this.options = options
|
||||
let {
|
||||
tab = 0
|
||||
} = options
|
||||
this.activeIndex = tab
|
||||
this.initIndex()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.showNavigationBarLoading()
|
||||
// #endif
|
||||
this.initRefresh()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.list.current_page >= this.list.last_page || this.loading) return
|
||||
this.param.page = this.param.page + 1
|
||||
this.loading = true
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
initIndex() {
|
||||
this.getList()
|
||||
},
|
||||
initRefresh() {
|
||||
this.param.page = 1
|
||||
this.initIndex()
|
||||
},
|
||||
async getList() {
|
||||
let {
|
||||
list: oldList,
|
||||
param,
|
||||
tabList,
|
||||
activeIndex
|
||||
} = this
|
||||
param.status = tabList[activeIndex].id
|
||||
let newList = await this.$api.shop.refundOrderList(param);
|
||||
|
||||
if (this.param.page == 1) {
|
||||
this.list = newList
|
||||
} else {
|
||||
newList.data = oldList.data.concat(newList.data)
|
||||
this.list = newList
|
||||
}
|
||||
this.loading = false
|
||||
this.tabList[1].number = newList.ing_count
|
||||
this.$util.hideAll()
|
||||
},
|
||||
handerTabChange(index) {
|
||||
this.activeIndex = index
|
||||
this.$util.showLoading()
|
||||
this.param.page = 1
|
||||
this.list.data = []
|
||||
this.getList()
|
||||
},
|
||||
// 取消退款
|
||||
async toChangeOrder(index, key) {
|
||||
let {
|
||||
id,
|
||||
order_code,
|
||||
order_goods,
|
||||
} = this.list.data[index]
|
||||
let {
|
||||
goods_cover: image,
|
||||
} = order_goods[0]
|
||||
this.popupInfo = {
|
||||
id,
|
||||
name: `订单编号：${order_code}`,
|
||||
image,
|
||||
index,
|
||||
refs_key: key
|
||||
}
|
||||
this.$refs[key].open()
|
||||
},
|
||||
async confirmUpdate() {
|
||||
let {
|
||||
id,
|
||||
index,
|
||||
refs_key
|
||||
} = this.popupInfo
|
||||
if (this.lockTap) return;
|
||||
this.lockTap = true;
|
||||
this.$util.showLoading()
|
||||
let methodModel = {
|
||||
'cancel_item': {
|
||||
method: 'cancelRefundOrder',
|
||||
status: -1,
|
||||
msg: '取消成功'
|
||||
}
|
||||
}
|
||||
try {
|
||||
let {
|
||||
method,
|
||||
status,
|
||||
msg
|
||||
} = methodModel[refs_key]
|
||||
await this.$api.shop[method]({
|
||||
id
|
||||
})
|
||||
this.$util.hideAll()
|
||||
this.list.data.splice(index, 1)
|
||||
this.$util.showToast({
|
||||
title: msg
|
||||
})
|
||||
this.lockTap = false
|
||||
let {
|
||||
number
|
||||
} = this.tabList[1]
|
||||
this.tabList[1].number = number - 1
|
||||
this.$refs[refs_key].close()
|
||||
} catch (e) {
|
||||
setTimeout(() => {
|
||||
this.lockTap = false
|
||||
this.$util.hideAll()
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
// 联系店主
|
||||
toTel(index) {
|
||||
let {
|
||||
mobile: url
|
||||
} = this.list.data[index].store_info
|
||||
this.$util.goUrl({
|
||||
url,
|
||||
openType: `call`
|
||||
})
|
||||
},
|
||||
// 订单详情
|
||||
goDetail(index) {
|
||||
let {
|
||||
id
|
||||
} = this.list.data[index]
|
||||
let url = `/shop/pages/refund/detail?id=${id}`
|
||||
this.$util.goUrl({
|
||||
url
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
336
uniapp/uni-app/shop/pages/seckill.vue
Normal file
336
uniapp/uni-app/shop/pages/seckill.vue
Normal file
@@ -0,0 +1,336 @@
|
||||
<template>
|
||||
<view class="shop-seckill" v-if="isLoad">
|
||||
<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" color="#fff" :backgroundColor="``"
|
||||
image="/static/image/shop/seckill-nav.png" leftIcon="icon-left" v-if="tabList.length>0">
|
||||
</uni-nav-bar>
|
||||
<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" color="#fff" :backgroundColor="primaryColor"
|
||||
title="限时秒杀" leftIcon="icon-left" v-else>
|
||||
</uni-nav-bar>
|
||||
<view :style="{height:`${configInfo.navBarHeight + 15}px`}"></view>
|
||||
<block v-if="tabList.length>0">
|
||||
<image mode="aspectFill" lazy-load class="common-bg mine abs"
|
||||
src="https://lbqny.migugu.com/admin/farm/bg-mine.png"></image>
|
||||
<view class="seckill-fill abs"></view>
|
||||
<scroll-view scroll-x class="seckill-tab ml-md mr-md" :scroll-into-view="'tab'+(activeIndex-1)"
|
||||
:scroll-with-animation="true">
|
||||
<view class="item-child rel flex-center flex-column text-center f-caption"
|
||||
:class="[{'cur':activeIndex==index}]" :style="{color:activeIndex==index?primaryColor:'#F9F9F9'}"
|
||||
v-for="(item,index) in tabList" :key="index" @tap="handerTabChange(index)" :id="'tab'+index">
|
||||
<view class="f-lg-title">{{item.time}}</view>
|
||||
<view>{{item.day}}</view>
|
||||
<view>{{statusType[item.atv_status]}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</block>
|
||||
<block v-for="(item,index) in list.data" :key="index">
|
||||
<view @tap.stop="goDetail(index)"
|
||||
class="goods-item flex-center rel ml-md mr-md pt-lg pb-lg pl-md pr-md fill-base"
|
||||
:class="[{'radius-bottom':index==0},{'mt-md radius-16':index>0}]">
|
||||
<image mode="aspectFill" lazy-load class="seckill-tag abs" src="/static/image/shop/seckill-tag.png">
|
||||
</image>
|
||||
<image mode="aspectFill" lazy-load class="cover radius-16" :src="item.cover"></image>
|
||||
<view class="flex-1 ml-md">
|
||||
<view class="f-title c-title text-bold mt-sm mb-sm ellipsis">{{item.goods_name}}
|
||||
</view>
|
||||
<view class="flex-center f-caption c-desc">
|
||||
<image mode="aspectFill" lazy-load class="store-img" src="/static/image/shop/seckill-store.png">
|
||||
</image>
|
||||
<view class="flex-1 ml-sm max-350 ellipsis">{{item.store_name}}</view>
|
||||
</view>
|
||||
<view class="flex-between mt-md mb-lg">
|
||||
<view class="line-item rel">
|
||||
<view class="cur abs" :style="{width:item.precent}"></view>
|
||||
<view class="f-icontext c-base abs"> {{item.precent}}</view>
|
||||
</view>
|
||||
<view class="c-caption" style="font-size: 20rpx;">已抢{{item.all_have_stock}}</view>
|
||||
</view>
|
||||
<view class="flex-between">
|
||||
<view class="flex-y-center">
|
||||
<view class="flex-y-baseline f-caption mb-sm" :style="{color:primaryColor}">
|
||||
¥<view class="f-lg-title">{{item.show_data.price}}</view>
|
||||
</view>
|
||||
<view class="ml-sm f-caption c-caption text-delete">¥{{item.show_data.init_price}}</view>
|
||||
</view>
|
||||
<view @tap.stop="toNotice(index)" class="common-btn flex-center f-caption c-base radius"
|
||||
:style="{background:primaryColor}">
|
||||
<view class="flex-center" v-if="tabList[activeIndex].atv_status==1"><i
|
||||
class="iconfont icon-tixing mr-sm"></i>{{item.have_notice?'已提醒':'提醒我'}}</view>
|
||||
<block v-else>{{btnText[tabList[activeIndex].atv_status]}}</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
|
||||
</load-more>
|
||||
<view :class="[{'fill-base ml-md mr-md radius-bottom':tabList.length>0}]"
|
||||
v-if="!loading&&list.data.length<=0&&list.current_page==1">
|
||||
<abnor></abnor>
|
||||
</view>
|
||||
<view class="space-footer"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions,
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
color: '#ffffff',
|
||||
isLoad: false,
|
||||
statusType: {
|
||||
1: '未开始',
|
||||
2: '进行中',
|
||||
3: '已结束'
|
||||
},
|
||||
btnText: {
|
||||
1: '',
|
||||
2: '立即抢购',
|
||||
3: '已结束'
|
||||
},
|
||||
activeIndex: 0,
|
||||
atvId: 0,
|
||||
tabList: [],
|
||||
param: {
|
||||
page: 1,
|
||||
},
|
||||
list: {
|
||||
data: [],
|
||||
current_page: 1
|
||||
},
|
||||
loading: true,
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
userInfo: state => state.user.userInfo,
|
||||
mineInfo: state => state.user.mineInfo,
|
||||
}),
|
||||
onLoad() {
|
||||
this.$util.showLoading()
|
||||
this.initIndex()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.showNavigationBarLoading()
|
||||
// #endif
|
||||
this.initRefresh()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.list.current_page >= this.list.last_page || this.loading) return
|
||||
this.param.page = this.param.page + 1
|
||||
this.loading = true
|
||||
this.getList()
|
||||
},
|
||||
onPageScroll(e) {
|
||||
let color = e.scrollTop < 20 ? '#ffffff' : '#000000'
|
||||
if (this.color == color) return
|
||||
this.color = color
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getUserInfo', 'getAuthUserProfile']),
|
||||
async initIndex() {
|
||||
let data = await this.$api.shop.killAtvList()
|
||||
data.map(item => {
|
||||
item.time = this.$util.formatTime(item.start_time * 1000, 'h:s')
|
||||
item.day = this.$util.formatTime(item.start_time * 1000, 'YY年M月D日')
|
||||
})
|
||||
this.tabList = data
|
||||
if (data.length == 0) {
|
||||
this.$util.hideAll()
|
||||
this.loading = false
|
||||
this.isLoad = true
|
||||
return
|
||||
}
|
||||
let {
|
||||
atvId,
|
||||
} = this
|
||||
let activeIndex = data.findIndex(item => {
|
||||
return item.id == atvId
|
||||
})
|
||||
activeIndex = activeIndex == -1 ? 0 : activeIndex
|
||||
this.activeIndex = activeIndex
|
||||
this.atvId = data[activeIndex].id
|
||||
await this.getList()
|
||||
this.isLoad = true
|
||||
},
|
||||
initRefresh() {
|
||||
this.initIndex()
|
||||
},
|
||||
handerTabChange(index) {
|
||||
this.activeIndex = index
|
||||
this.atvId = this.tabList[index].id
|
||||
this.$util.showLoading()
|
||||
this.param.page = 1
|
||||
this.list.data = []
|
||||
this.getList()
|
||||
},
|
||||
async getList() {
|
||||
let {
|
||||
list: oldList,
|
||||
atvId: atv_id,
|
||||
} = this
|
||||
let param = Object.assign({}, this.param, {
|
||||
atv_id,
|
||||
})
|
||||
let newList = await this.$api.shop.killGoodsList(param);
|
||||
newList.data.map(item => {
|
||||
let {
|
||||
all_stock,
|
||||
all_have_stock
|
||||
} = item
|
||||
item.precent = (all_have_stock / all_stock * 100).toFixed(2) + '%'
|
||||
})
|
||||
if (this.param.page == 1) {
|
||||
this.list = newList
|
||||
} else {
|
||||
newList.data = oldList.data.concat(newList.data)
|
||||
this.list = newList
|
||||
}
|
||||
this.loading = false
|
||||
this.$util.hideAll()
|
||||
},
|
||||
async goDetail(index) {
|
||||
let {
|
||||
goods_id
|
||||
} = this.list.data[index]
|
||||
this.$util.goUrl({
|
||||
url: `/shop/pages/detail?id=${goods_id}`
|
||||
})
|
||||
},
|
||||
async toNotice(index) {
|
||||
let {
|
||||
atv_id,
|
||||
goods_id,
|
||||
have_notice
|
||||
} = this.list.data[index]
|
||||
let {
|
||||
atv_status
|
||||
} = this.tabList[this.activeIndex]
|
||||
if (atv_status != 1) return
|
||||
await this.$api.shop.killNotice({
|
||||
atv_id,
|
||||
goods_id
|
||||
})
|
||||
this.list.data[index].have_notice = have_notice === 1 ? 0 : 1
|
||||
this.$util.showToast({
|
||||
title: have_notice === 1 ? `取消成功` : `提醒成功`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.shop-seckill {
|
||||
.seckill-nav {
|
||||
width: 182rpx;
|
||||
height: 41rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.seckill-fill {
|
||||
top: 220rpx;
|
||||
left: 20rpx;
|
||||
width: calc(100% - 40rpx);
|
||||
height: 140rpx;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
|
||||
.seckill-tab {
|
||||
white-space: nowrap;
|
||||
width: calc(100% - 40rpx);
|
||||
height: 154rpx;
|
||||
|
||||
.item-child {
|
||||
display: inline-block;
|
||||
width: 260rpx;
|
||||
height: 140rpx;
|
||||
padding: 5rpx 0;
|
||||
box-sizing: border-box;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
|
||||
.cur {
|
||||
margin-top: 0;
|
||||
height: 154rpx;
|
||||
background: #fff;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
|
||||
.f-lg-title {
|
||||
font-size: 46rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radius-bottom {
|
||||
border-radius: 0 0 16rpx 16rpx;
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
|
||||
.seckill-tag {
|
||||
top: 30rpx;
|
||||
left: 40rpx;
|
||||
width: 60rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 258rpx;
|
||||
height: 258rpx;
|
||||
}
|
||||
|
||||
.store-img {
|
||||
width: 20rpx;
|
||||
height: 25rpx;
|
||||
}
|
||||
|
||||
.f-title.ellipsis {
|
||||
max-width: 392rpx;
|
||||
}
|
||||
|
||||
.line-item {
|
||||
width: 250rpx;
|
||||
height: 24rpx;
|
||||
background: rgba(0, 146, 84, 0.2);
|
||||
border-radius: 12rpx;
|
||||
|
||||
.cur {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 24rpx;
|
||||
background: linear-gradient(44deg, #39b54a 0%, #439A4D 100%);
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.f-icontext {
|
||||
top: 1rpx;
|
||||
left: 15rpx;
|
||||
height: 24rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.common-btn {
|
||||
min-width: 134rpx;
|
||||
padding: 0;
|
||||
|
||||
.iconfont {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
424
uniapp/uni-app/shop/pages/sign.vue
Normal file
424
uniapp/uni-app/shop/pages/sign.vue
Normal file
@@ -0,0 +1,424 @@
|
||||
<template>
|
||||
<view class="pages-mine" v-if="detail.id">
|
||||
<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" color="#fff"
|
||||
:backgroundColor="color == '#ffffff' ?``:primaryColor" leftIcon="icon-left" title="签到">
|
||||
</uni-nav-bar>
|
||||
<view class="sign-info abs">
|
||||
<image mode="aspectFill" lazy-load class="common-bg sign abs" :src="cover"></image>
|
||||
<view @tap="$util.goUrl({url:`/shop/pages/integral/list`})"
|
||||
class="exchange-btn abs flex-center f-caption c-base">兑换好礼
|
||||
</view>
|
||||
<view class="integral-info abs flex-center flex-column c-base">
|
||||
<view class="integral-num">{{detail.integral}}</view>
|
||||
<image lazy-load class="integral-icon mt-sm" src="/static/image/shop/integral.png"></image>
|
||||
<view class="f-icontext">我的积分</view>
|
||||
</view>
|
||||
<view class="count-info abs flex-center ml-md mr-md fill-base radius-24">
|
||||
<view class="flex-center flex-column">
|
||||
<view class="f-lg-title c-title text-bold">{{detail.sign_num}}</view>
|
||||
<view class="f-caption c-caption">连续签到(天)</view>
|
||||
</view>
|
||||
<view class="flex-center flex-column">
|
||||
<view class="f-lg-title c-title text-bold">{{detail.total_sign_num}}</view>
|
||||
<view class="f-caption c-caption">累计签到(天)</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="space-sign rel"></view>
|
||||
<view class="sign-date-info fill-base mt-md ml-md mr-md radius-24">
|
||||
<view class="flex-center pt-lg pb-lg">
|
||||
<view class="flex-y-center f-paragraph">
|
||||
<i @tap.stop="toChangeDate(-1)" class="iconfont icon-sanjiao pl-lg pr-lg rotate-180"></i>
|
||||
<view class="month-text flex-center f-sm-title c-title text-bold"> {{detail.month}} </view>
|
||||
<i @tap.stop="toChangeDate(1)" class="iconfont icon-sanjiao pl-lg pr-lg"></i>
|
||||
</view>
|
||||
</view>
|
||||
<view class="day-info flex-warp">
|
||||
<view class="day-item flex-center flex-column" v-for="(item,index) in weekList">
|
||||
{{item}}
|
||||
</view>
|
||||
<view class="day-item flex-center flex-column" v-for="(item,index) in timeList">
|
||||
</view>
|
||||
<!-- status 0可签到；1已签到；2未在签到时间内 -->
|
||||
<view @tap.stop="toChangeItem('dayInd',index)"
|
||||
class="day-item flex-center flex-column f-title c-title radius"
|
||||
:class="[{'sign':item.status == 1 },{'today':item.day_str == today || dayInd == index},{'register':item.day_str == detail.create_time}]"
|
||||
:style="{color:item.day_str == today || item.day_str == detail.create_time || dayInd == index ? '#fff' : ''}"
|
||||
v-for="(item,index) in detail.list" :key="index">
|
||||
{{item.day_str == detail.create_time ? '注册' : item.day}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-between pl-lg pr-lg pb-md f-paragraph c-title">
|
||||
<view @tap="$refs.show_rule_item.open()" class="flex-center c-caption"><i
|
||||
class="iconfont icon-wenhao mr-sm"></i>签到规则</view>
|
||||
<view @tap="toChangeItem('is_sign', !is_sign)" class="flex-center">签到提醒<i class="iconfont ml-sm"
|
||||
:class="[{'icon-switch c-caption':!is_sign},{'icon-switch-on':is_sign}]"
|
||||
:style="{color:is_sign?primaryColor:''}"></i></view>
|
||||
</view>
|
||||
<view @tap="toSign" class="sign-btn flex-center f-title c-base radius">立即签到</view>
|
||||
<view class="space-lg"></view>
|
||||
</view>
|
||||
<view class="mt-md ml-md mr-md pd-lg fill-base radius-24">
|
||||
<view class="f-title c-title text-bold">积分纪录</view>
|
||||
<block v-for="(item,index) in list.data" :key="index">
|
||||
<view @tap.stop="goDetail(index)" class="integral-item flex-center mt-md radius-16">
|
||||
<image lazy-load class="integral-img radius-16" src="/static/image/shop/integral.png"></image>
|
||||
<view class="flex-1 ml-lg">
|
||||
<view class="flex-1 flex-between">
|
||||
<view>
|
||||
<view class="f-paragraph c-title mt-sm mb-sm">{{item.create_date}} 签到赠送</view>
|
||||
<view class="f-caption" style="color: #C7C7C7;">{{item.create_time_text}}</view>
|
||||
</view>
|
||||
<view class="flex-y-baseline f-caption" :style="{color:primaryColor}">+<view
|
||||
class="f-lg-title">
|
||||
{{item.integral}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
|
||||
</load-more>
|
||||
<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
|
||||
<view class="space-footer"></view>
|
||||
|
||||
|
||||
<uni-popup ref="show_rule_item">
|
||||
<view class="popup-rule">
|
||||
<view class="rule-info pd-lg fill-base radius-24">
|
||||
<view class="flex-center f-title c-title text-bold">签到规则</view>
|
||||
<view class="rule-text mt-lg f-paragraph">
|
||||
<text decode="emsp" style="word-break:break-all;">{{detail.integral_text}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<i @tap="$refs.show_rule_item.close()" class="flex-center mt-lg iconfont icon-close c-base"></i>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions,
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
color: '#ffffff',
|
||||
cover: 'https://lbqny.migugu.com/admin/farm/default_sign.png',
|
||||
weekList: ['日', '一', '二', '三', '四', '五', '六'],
|
||||
timeList: [],
|
||||
today: '',
|
||||
dayInd: -1,
|
||||
is_sign: true,
|
||||
detail: {},
|
||||
param: {
|
||||
page: 1,
|
||||
},
|
||||
list: {
|
||||
data: []
|
||||
},
|
||||
loading: true,
|
||||
lockTap: false
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
userInfo: state => state.user.userInfo,
|
||||
mineInfo: state => state.user.mineInfo,
|
||||
}),
|
||||
onLoad() {
|
||||
this.$util.showLoading()
|
||||
this.initIndex()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.showNavigationBarLoading()
|
||||
// #endif
|
||||
this.initRefresh()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.list.current_page >= this.list.last_page || this.loading) return
|
||||
this.param.page = this.param.page + 1
|
||||
this.loading = true
|
||||
this.getList()
|
||||
},
|
||||
onPageScroll(e) {
|
||||
let color = e.scrollTop < 20 ? '#ffffff' : '#000000'
|
||||
if (this.color == color) return
|
||||
this.color = color
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getConfigInfo', 'getUserInfo', 'getMineInfo', 'getAuthUserProfile']),
|
||||
async initIndex(day = '') {
|
||||
let today = this.$util.DateToUnix(this.$util.formatTime(new Date().getTime(),
|
||||
'YY-M-D'))
|
||||
this.today = today
|
||||
day = day || this.$util.formatTime(today * 1000, 'YY-M-D')
|
||||
let [detail] = await Promise.all([this.$api.shop.signinIndex({
|
||||
day
|
||||
}), this.getList()])
|
||||
detail.id = 1
|
||||
let {
|
||||
list,
|
||||
sign_notice,
|
||||
create_time
|
||||
} = detail
|
||||
detail.create_time = this.$util.DateToUnix(this.$util.formatTime(create_time * 1000, 'YY-M-D'))
|
||||
this.dayInd = list.findIndex(item => {
|
||||
return item.day_str == today
|
||||
})
|
||||
let {
|
||||
week,
|
||||
day_str
|
||||
} = list[0]
|
||||
detail.month = this.$util.formatTime(day_str * 1000, 'YY年M月')
|
||||
let timeList = []
|
||||
if (week !== 0) {
|
||||
for (let i = 0; i < week; i++) {
|
||||
timeList.push({
|
||||
id: 0
|
||||
})
|
||||
}
|
||||
}
|
||||
this.timeList = timeList
|
||||
this.is_sign = sign_notice === 1
|
||||
this.detail = detail
|
||||
this.$util.hideAll()
|
||||
},
|
||||
initRefresh() {
|
||||
this.param.page = 1
|
||||
this.initIndex()
|
||||
},
|
||||
async getList() {
|
||||
let {
|
||||
list: oldList,
|
||||
param,
|
||||
} = this
|
||||
let newList = await this.$api.shop.signinRecordList(param);
|
||||
if (this.param.page == 1) {
|
||||
this.list = newList
|
||||
} else {
|
||||
newList.data = oldList.data.concat(newList.data)
|
||||
this.list = newList
|
||||
}
|
||||
this.loading = false
|
||||
this.$util.hideAll()
|
||||
},
|
||||
toChangeDate(type) {
|
||||
let {
|
||||
list
|
||||
} = this.detail
|
||||
let one = 24 * 3600
|
||||
let index = type === 1 ? list.length - 1 : 0
|
||||
let {
|
||||
day_str
|
||||
} = list[index]
|
||||
let day = this.$util.formatTime((day_str + one * type) * 1000, 'YY-M-D')
|
||||
this.initIndex(day)
|
||||
},
|
||||
toChangeItem(key, val) {
|
||||
if (key === 'dayInd') {
|
||||
let {
|
||||
status,
|
||||
day_str
|
||||
} = this.detail.list[val]
|
||||
if (status) {
|
||||
let {
|
||||
create_time
|
||||
} = this.detail
|
||||
let msg = day_str < create_time ? `注册时间后才可签到` : `签到未开始`
|
||||
this.$util.showToast({
|
||||
title: status == 1 ? `已签到` : msg
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
this[key] = val
|
||||
if (key === 'is_sign') {
|
||||
this.$api.user.userUpdate({
|
||||
sign_notice: val ? 1 : 0
|
||||
})
|
||||
}
|
||||
},
|
||||
async toSign() {
|
||||
let {
|
||||
dayInd,
|
||||
} = this
|
||||
let {
|
||||
day_str: day
|
||||
} = this.detail.list[dayInd]
|
||||
if (this.lockTap) return;
|
||||
this.lockTap = true;
|
||||
this.$util.showLoading()
|
||||
try {
|
||||
await this.$api.shop.signin({
|
||||
day
|
||||
})
|
||||
this.$util.showToast({
|
||||
title: `签到成功`
|
||||
})
|
||||
this.lockTap = false
|
||||
await this.initRefresh()
|
||||
} catch (e) {
|
||||
setTimeout(() => {
|
||||
this.lockTap = false
|
||||
this.$util.hideAll()
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pages-mine {
|
||||
.sign-info {
|
||||
width: 100%;
|
||||
height: 579rpx;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
|
||||
.exchange-btn {
|
||||
top: 167rpx;
|
||||
right: 0;
|
||||
width: 146rpx;
|
||||
height: 53rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 100rpx 0 0 100rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.integral-info {
|
||||
width: 100%;
|
||||
height: 217rpx;
|
||||
top: 167rpx;
|
||||
left: 0;
|
||||
|
||||
.integral-num {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
|
||||
.integral-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.count-info {
|
||||
width: calc(100% - 40rpx);
|
||||
height: 162rpx;
|
||||
bottom: 0;
|
||||
|
||||
.flex-center {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.space-sign {
|
||||
width: 100%;
|
||||
height: 579rpx;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.sign-date-info {
|
||||
.month-text {
|
||||
width: 300rpx;
|
||||
}
|
||||
|
||||
.day-info {
|
||||
margin: 0 5rpx;
|
||||
|
||||
.day-item {
|
||||
width: 62rpx;
|
||||
height: 62rpx;
|
||||
margin: 10rpx 19rpx;
|
||||
|
||||
.f-title {
|
||||
height: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.sign {
|
||||
background: #EFEFEF;
|
||||
}
|
||||
|
||||
.today {
|
||||
background: linear-gradient(4deg, #39b54a 0%, #69D275 100%);
|
||||
box-shadow: 0px 3px 11px 0px rgba(13, 143, 57, 0.34);
|
||||
}
|
||||
|
||||
.register {
|
||||
background: linear-gradient(4deg, #F3A664 0%, #FBE945 100%);
|
||||
box-shadow: 0px 3px 11px 0px rgba(243,166,100, 0.34);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.icon-wenhao {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.icon-switch,
|
||||
.icon-switch-on {
|
||||
font-size: 70rpx;
|
||||
}
|
||||
|
||||
.sign-btn {
|
||||
width: 540rpx;
|
||||
height: 72rpx;
|
||||
margin: 0 auto;
|
||||
background: linear-gradient(360deg, #39b54a 0%, #69D275 100%);
|
||||
box-shadow: 0px 6rpx 17rpx 0px rgba(13, 143, 47, 0.3500);
|
||||
}
|
||||
}
|
||||
|
||||
.integral-item {
|
||||
|
||||
.integral-img {
|
||||
width: 47rpx;
|
||||
height: 47rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-rule {
|
||||
width: 596rpx;
|
||||
margin: 0 auto;
|
||||
|
||||
.rule-info {
|
||||
margin-top: 10vh;
|
||||
|
||||
.rule-text {
|
||||
color: #4A4A4A;
|
||||
line-height: 1.4;
|
||||
min-height: 100rpx;
|
||||
max-height: 60vh;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-close {
|
||||
font-size: 70rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
1011
uniapp/uni-app/shop/pages/store.vue
Normal file
1011
uniapp/uni-app/shop/pages/store.vue
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user