Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

对接下单支付

master
邓平艺 4 years ago
parent
2caa19598f
commit
c4b4e37ea3
13 changed files with 757 additions and 141 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      .hbuilderx/launch.json
  2. 2
      components/lf-shopGoodsCard/lf-shopGoodsCard.vue
  3. 2
      components/lf-waterfall-pointgoods/lf-waterfall.vue
  4. 2
      components/lf-waterfall-shopdetails/lf-waterfall.vue
  5. 25
      pages/address/list/list.vue
  6. 2
      pages/index/list/monthlyList.vue
  7. 2
      pages/index/list/selected.vue
  8. 210
      pages/order/cashier/cashier.vue
  9. 341
      pages/order/confirm/confirm.vue
  10. 135
      pages/shop/goodsdetail.vue
  11. 2
      pages/shop/seckillList.vue
  12. 2
      pages/shop/shopdetail.vue
  13. 76
      pages/store/cart/cart.vue

11
.hbuilderx/launch.json
View File

@ -2,10 +2,15 @@
// launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数 // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
"version": "0.0", "version": "0.0",
"configurations": [{ "configurations": [{
"type": "uniCloud",
"default": {
"default" :
{
"launchtype" : "local" "launchtype" : "local"
}
},
"mp-weixin" :
{
"launchtype" : "local"
},
"type" : "uniCloud"
} }
] ]
} }

2
components/lf-shopGoodsCard/lf-shopGoodsCard.vue
View File

@ -7,7 +7,7 @@
<view class="scroll-content"> <view class="scroll-content">
<view class="goods-item" <view class="goods-item"
v-for="(item, index) in list" :key="index" v-for="(item, index) in list" :key="index"
@click="$url('/pages/shop/goodsdetail?type=mail&id='+ item.associate.id)">
@click="$url('/pages/shop/goodsdetail?id='+ item.associate.id)">
<image class="goods-img" :src="item.associate.img"></image> <image class="goods-img" :src="item.associate.img"></image>
<view class="goods-info"> <view class="goods-info">
<view class="lf-line-1">{{ item.associate.name }}</view> <view class="lf-line-1">{{ item.associate.name }}</view>

2
components/lf-waterfall-pointgoods/lf-waterfall.vue
View File

@ -103,7 +103,7 @@
}, },
methods: { methods: {
onClick(id){ onClick(id){
this.$url('/pages/shop/goodsdetail?type=point&id='+id);
this.$url('/pages/shop/goodsdetail?id='+id);
this.$emit('click'); this.$emit('click');
}, },
goAd(type,url){ goAd(type,url){

2
components/lf-waterfall-shopdetails/lf-waterfall.vue
View File

@ -121,7 +121,7 @@
}, },
methods: { methods: {
onClick(id){ onClick(id){
this.$url('/pages/shop/goodsdetail?type=mail&id='+id);
this.$url('/pages/shop/goodsdetail?id='+id);
this.$emit('click'); this.$emit('click');
}, },
goAd(type,url){ goAd(type,url){

25
pages/address/list/list.vue
View File

@ -2,7 +2,12 @@
<view id="address-list"> <view id="address-list">
<lf-nav title="地址管理" :showIcon="true" bgColor="#fff"></lf-nav> <lf-nav title="地址管理" :showIcon="true" bgColor="#fff"></lf-nav>
<view class="list-box"> <view class="list-box">
<view class="list-item" :data-info="JSON.stringify(item)" :data-id="item.id" v-for="(item, index) in list" :key="index">
<view class="list-item"
:data-info="JSON.stringify(item)"
:data-id="item.id"
v-for="(item, index) in list"
:key="index"
@click="selectAddress(item.id)">
<!-- <view class="user"> <!-- <view class="user">
<view class="name"> <view class="name">
<text>{{item.accept_name}}</text> <text>{{item.accept_name}}</text>
@ -63,7 +68,8 @@ export default {
order_no: '', order_no: '',
url: '', url: '',
id:'', id:'',
is_load: true
is_load: true,
is_select: false
}; };
}, },
@ -79,8 +85,10 @@ export default {
}, },
onLoad(e) { onLoad(e) {
// 暂时注释
// pageLogin(getUrl());
pageLogin(getUrl());
this.is_select = Boolean(Number(e.is_select));
this.setData({ this.setData({
order_no: e.order_no, order_no: e.order_no,
url: e.url url: e.url
@ -134,6 +142,15 @@ export default {
}) })
this.switchDefaultAddress(id); this.switchDefaultAddress(id);
}, },
// 选择地址
selectAddress(id){
if(this.is_select){
let pages = getCurrentPages();
let prePage = pages[pages.length - 2];
prePage.$vm.address_id = id;
this.$toBack();
}
},
switchDefaultAddress(id){ switchDefaultAddress(id){
var token = this.$cookieStorage.get('user_token'); var token = this.$cookieStorage.get('user_token');
this.$http.ajax({ this.$http.ajax({

2
pages/index/list/monthlyList.vue
View File

@ -6,7 +6,7 @@
<view class="title">热销榜单</view> <view class="title">热销榜单</view>
</view> </view>
<view class="content"> <view class="content">
<view class="card" v-for="(item, index) in 7" :key="index" @click="$url('/pages/shop/goodsdetail?type=mail')">
<view class="card" v-for="(item, index) in 7" :key="index" @click="$url('/pages/shop/goodsdetail?id='+ item.id)">
<view class="goods-img"> <view class="goods-img">
<image class="img" src="https://picsum.photos/200/300"></image> <image class="img" src="https://picsum.photos/200/300"></image>
<view class="ranking"> <view class="ranking">

2
pages/index/list/selected.vue
View File

@ -13,7 +13,7 @@
</view> </view>
<scroll-view class="scroll-view" :scroll-x="true"> <scroll-view class="scroll-view" :scroll-x="true">
<view class="scroll-content"> <view class="scroll-content">
<view class="goods-item" v-for="(item, index) in 5" :key="index" @click="$url('/pages/shop/goodsdetail?type=mail')">
<view class="goods-item" v-for="(item, index) in 5" :key="index" @click="$url('/pages/shop/goodsdetail?id='+ item.id)">
<view class="goods-img"> <view class="goods-img">
<image class="img"></image> <image class="img"></image>
<view class="ranking"> <view class="ranking">

210
pages/order/cashier/cashier.vue
View File

@ -6,7 +6,7 @@
<view class="lf-font-28 lf-color-222">需要支付</view> <view class="lf-font-28 lf-color-222">需要支付</view>
<view class="lf-m-t-10 lf-m-b-10"> <view class="lf-m-t-10 lf-m-b-10">
<text class="symbol">￥</text> <text class="symbol">￥</text>
<text class="price">385</text>
<text class="price">{{ amount }}</text>
</view> </view>
<view class="tips"> <view class="tips">
<view>剩余支付时间：</view> <view>剩余支付时间：</view>
@ -50,19 +50,41 @@
pay_list: [{ pay_list: [{
name: '余额支付', name: '余额支付',
icon: 'icon--', icon: 'icon--',
type: 'balance',
checked: false checked: false
},{ },{
name: '微信支付', name: '微信支付',
icon: 'icon--1', icon: 'icon--1',
type: 'wx_lite',
checked: true checked: true
}], }],
time: new Date('2021/09/8 14:15:00').getTime() - new Date('2021/09/8 14:10:00').getTime()
time: new Date('2021/09/8 14:15:00').getTime() - new Date('2021/09/8 14:10:00').getTime(),
is_date_finish: false,
amount: '',
order_no: '',
token: '',
balance_sum: 0
} }
}, },
onLoad(){
onLoad(options){
this.token = this.$cookieStorage.get('user_token');
this.amount = options.amount;
this.order_no = options.order_no;
this.getBalanceSum();
}, },
methods: { methods: {
// 获取余额
getBalanceSum(){
this.$http.get({
api: 'api/users/balance/sum',
header: {
Authorization: this.token
}
}).then(res => {
this.balance_sum = res.data.data.sum;
})
},
// 改变支付方式
checkChange(event, current){ checkChange(event, current){
let list = this.pay_list.map((item, index) => { let list = this.pay_list.map((item, index) => {
if(index == current){ if(index == current){
@ -74,11 +96,189 @@
}) })
this.pay_list = list; this.pay_list = list;
}, },
// 倒计时结束
dateFinish(){ dateFinish(){
console.log("倒计时结束"); console.log("倒计时结束");
this.is_date_finish = true;
this.$msg('订单超时', {icon: 'error'}).then(() => {
this.$toBack();
})
}, },
// 支付
confirm(){ confirm(){
this.$msg('支付成功')
if(this.is_date_finish) return this.$msg('订单超时未支付');
this.getOpenid().then(res => {
let channel = '';
this.pay_list.map(item => {
if(item.checked){
channel = item.type;
}
})
var data = {
channel: channel == 'balance' ? 'wx_lite' : channel,
openid: res,
order_no: this.order_no,
balance: channel == 'balance' ? Number(this.amount) : 0
};
this.$http.post({
api: `api/shopping/order/charge`,
data: data,
header: {
Authorization: this.token
}
}).then(res => {
res = res.data;
if (res.status) {
// this.formId = e.detail.formId || '';
if (res.data.name == 'balance') {
this.balanceCharge();
} else {
this.newcharge(true, res.data.charge);
}
} else {
this.newcharge(false, res.message);
}
})
}).catch(() => {
this.setData({
loading: false
});
wx.showModal({
content: '支付失败',
showCancel: false
});
});
},
// 获取openid
getOpenid() {
return new Promise((resolve, reject) => {
wx.login({
success: res => {
this.$http.get({
api: `api/oauth/miniprogram/openid`,
data: {
code: res.code
}
}).then(res => {
res = res.data;
resolve(res.data.openid);
}).catch(() => {
reject('获取openid失败');
});
},
fail: () => {
wx.showModal({
content: "接口请求失败",
showCancel: false
});
}
});
});
},
// 新版支付
newcharge(success, charge) {
if (success) {
var that = this;
if (charge.pay_scene == 'test') {
wx.showModal({
content: '不支持模拟支付',
showCancel: false
});
this.setData({
loading: false
});
} else {
wx.requestPayment({
"timeStamp": charge.credential.wechat.timeStamp,
"nonceStr": charge.credential.wechat.nonceStr,
"package": charge.credential.wechat.package,
"signType": charge.credential.wechat.signType,
"paySign": charge.credential.wechat.paySign,
success: res => {
if (res.errMsg == 'requestPayment:ok') {
this.setData({
loading: false
});
// wx.redirectTo({
// url: `/pages/store/success/success?order_no=${that.order_no}&amount=${that.amount}&channel=${that.channel}&formId=${this.formId}` //&charge_id=${charge.charge_id} charge_id 支付测试使用
// });
uni.redirectTo({
url: '/pages/aboutpay/paystate?payState=1&amount='+ that.amount
})
} else {
wx.showModal({
content: '调用支付失败！',
showCancel: false
});
}
},
fail: err => {
this.setData({
loading: false
});
if (err.errMsg == 'requestPayment:fail cancel') {
// wx.redirectTo({
// url: `/pages/order/detail/detail?no=${that.order_no}`
// });
uni.redirectTo({
url: '/pages/order/index/onlineorder'
})
} else {
wx.showModal({
content: '调用支付失败！',
showCancel: false
});
}
}
});
}
} else {
this.setData({
loading: false
});
wx.showModal({
content: charge || '请求支付失败，请重试！',
showCancel: false
});
}
},
// 纯余额支付
balanceCharge() {
this.setData({
loading: false
});
// wx.redirectTo({
// url: `/pages/store/success/success?order_no=${this.order_no}&amount=${this.amount}&channel=${this.channel}&formId=${this.formId}`
// });
uni.redirectTo({
url: '/pages/aboutpay/paystate?payState=1&amount='+ this.amount
})
},
setData: function (obj) {
let that = this;
let keys = [];
let val, data;
Object.keys(obj).forEach(function (key) {
keys = key.split('.');
val = obj[key];
data = that.$data;
keys.forEach(function (key2, index) {
if (index + 1 == keys.length) {
that.$set(data, key2, val);
} else {
if (!data[key2]) {
that.$set(data, key2, {});
}
}
data = data[key2];
});
});
} }
} }
} }

341
pages/order/confirm/confirm.vue
View File

@ -1,96 +1,261 @@
<template> <template>
<view> <view>
<lf-nav title="确认订单" :showIcon="true"></lf-nav> <lf-nav title="确认订单" :showIcon="true"></lf-nav>
<block v-if="$isRight(order_detail)">
<view class="card head"> <view class="card head">
<view class="lf-font-32 lf-color-222">选择收货方式</view> <view class="lf-font-32 lf-color-222">选择收货方式</view>
<view class="capsule"> <view class="capsule">
<view class="item" :class="{'capsule-active': mode == 1}" @click="mode = 1">邮寄</view>
<view class="item" :class="{'capsule-active': mode == 2}" @click="mode = 2">自提</view>
<view class="item" :class="{'capsule-active': mode == 0}" @click="mode = 0">邮寄</view>
<view class="item" :class="{'capsule-active': mode == 1}" @click="mode = 1">自提</view>
</view> </view>
</view> </view>
<view class="card address" v-if="mode == 1">
<view @click="$url('/pages/address/list/list')">
<view class="card address" v-if="mode == 0">
<view @click="$url('/pages/address/list/list?is_select=1')">
<text class="lf-font-28 lf-color-primary lf-m-r-10">更换收获地址</text> <text class="lf-font-28 lf-color-primary lf-m-r-10">更换收获地址</text>
<text class="lf-iconfont icon-xiangyou lf-font-24 lf-color-777"></text> <text class="lf-iconfont icon-xiangyou lf-font-24 lf-color-777"></text>
</view> </view>
<view class="lf-m-t-20"> <view class="lf-m-t-20">
<text class="lf-font-28 lf-color-222 lf-font-bold">王小二</text>
<text class="lf-font-28 lf-color-777 lf-m-l-20">18284385380</text>
<text class="lf-font-28 lf-color-222 lf-font-bold">{{ address.accept_name }}</text>
<text class="lf-font-28 lf-color-777 lf-m-l-20">{{ address.mobile }}</text>
</view> </view>
<view class="lf-font-28 lf-color-333 lf-m-t-10"> <view class="lf-font-28 lf-color-333 lf-m-t-10">
<text>广西壮族自治区-南宁市-青秀区-民族大道民族大道民族大道民族大道民族大道民族大道15号</text>
<text>{{ address.address_name }}{{ address.address }}</text>
</view> </view>
</view> </view>
<view class="card goods"> <view class="card goods">
<view>
<view @click="$url('/pages/shop/shopdetail?id='+ order_detail.order.brand.id)">
<text class="lf-iconfont icon-Group- lf-font-30"></text> <text class="lf-iconfont icon-Group- lf-font-30"></text>
<text class="shop-name">精品超市</text>
<text class="shop-name">{{ order_detail.order.brand.name }}</text>
<text class="lf-iconfont icon-xiangyou lf-font-24"></text> <text class="lf-iconfont icon-xiangyou lf-font-24"></text>
</view> </view>
<view class="lf-flex lf-m-t-20">
<image class="goods-img"></image>
<view class="lf-flex lf-m-t-20" v-for="(item, index) in order_detail.order.items" :key="index">
<image class="goods-img" :src="item.item_meta.image"></image>
<view class="info"> <view class="info">
<view class="lf-font-26 lf-color-333 lf-line-1">爱他美较大婴儿配方奶粉较大配方奶粉较2段 </view>
<view class="lf-font-24 lf-color-777">500g</view>
<view class="lf-font-26 lf-color-333 lf-line-1">{{ item.item_name }}</view>
<view class="lf-font-24 lf-color-777">{{ item.item_meta.specs_text }}</view>
<view class="lf-row-between" style="line-height: 1;"> <view class="lf-row-between" style="line-height: 1;">
<text class="price">¥385</text>
<text class="lf-font-28 lf-color-777">x 2</text>
<text class="price">¥{{ item.total_yuan }}</text>
<text class="lf-font-28 lf-color-777">x {{ item.quantity }}</text>
</view> </view>
</view> </view>
</view> </view>
<view class="tips">支付成功后15天内柜台提货</view>
<!-- <view class="tips">支付成功后15天内柜台提货</view> -->
<view class="lf-flex lf-m-t-20"> <view class="lf-flex lf-m-t-20">
<view class="lf-font-28 lf-color-777">留言</view> <view class="lf-font-28 lf-color-777">留言</view>
<input v-model="value" class="input" placeholder="有什么要求，请备注留言" /> <input v-model="value" class="input" placeholder="有什么要求，请备注留言" />
</view> </view>
</view> </view>
<view class="card lf-m-t-20"> <view class="card lf-m-t-20">
<view class="lf-row-between">
<view class="lf-row-between" @click="openCheckCoupon">
<view class="lf-font-28 lf-color-777">优惠券</view> <view class="lf-font-28 lf-color-777">优惠券</view>
<view> <view>
<text class="lf-font-26 lf-color-999 lf-m-r-10">暂无优惠券</text>
<text class="lf-font-26 lf-color-999 lf-m-r-10">{{ showCouponTitle }}</text>
<text class="lf-iconfont icon-xiangyou lf-font-24"></text> <text class="lf-iconfont icon-xiangyou lf-font-24"></text>
</view> </view>
</view> </view>
<view class="lf-row-between lf-m-t-20"> <view class="lf-row-between lf-m-t-20">
<view class="lf-font-28 lf-color-777">商品金额</view> <view class="lf-font-28 lf-color-777">商品金额</view>
<view class="lf-font-26 lf-color-222">¥385</view>
<view class="lf-font-26 lf-color-222">¥{{ order_detail.order.items_total_yuan }}</view>
</view> </view>
<view class="lf-row-between lf-m-t-20" v-if="mode == 1">
<view class="lf-row-between lf-m-t-20" v-if="mode == 0">
<view class="lf-font-28 lf-color-777">运费</view> <view class="lf-font-28 lf-color-777">运费</view>
<view class="lf-font-26" style="color: #F63434;">¥0</view>
<view class="lf-font-26" style="color: #F63434;">+¥{{ order_detail.order.payable_freight }}</view>
</view> </view>
<view class="lf-row-between lf-m-t-20"> <view class="lf-row-between lf-m-t-20">
<view class="lf-font-28 lf-color-777">优惠</view> <view class="lf-font-28 lf-color-777">优惠</view>
<view class="lf-font-26" style="color: #F63434;">¥0</view>
<view class="lf-font-26" style="color: #F63434;">-¥{{ order_detail.order.adjustments_total_yuan }}</view>
</view> </view>
</view> </view>
<view class="spread-out"></view> <view class="spread-out"></view>
<view class="fixed-bottom"> <view class="fixed-bottom">
<view class="fixed-content"> <view class="fixed-content">
<view class="lf-font-24 lf-color-777">共1件</view>
<view class="lf-font-24 lf-color-777">共{{ order_detail.order.count }}件</view>
<view class="lf-flex"> <view class="lf-flex">
<view class="lf-font-32 lf-color-primary" style="max-width: 400rpx;">合计 ¥385</view>
<view class="confirm-btn" hover-class="lf-opacity">提交订单</view>
<view class="lf-font-32 lf-color-primary" style="max-width: 400rpx;">合计 ¥{{ order_detail.order.total_yuan }}</view>
<view class="confirm-btn" hover-class="lf-opacity" @click="confirm">提交订单</view>
</view>
</view>
</view>
<!-- 选择优惠券弹出层 -->
<u-popup v-model="show_coupon" mode="bottom" :round="true" borderRadius="20">
<view class="popup-content">
<view class="lf-row-between" v-for="(item, index) in order_detail.coupons" :key="index">
<radio-group @change="couponChange">
<radio :value="index" :checked="coupon_index == index"></radio>
</radio-group>
<view class="coupon-card lf-m-b-30" :class="{'invalid-bg': item.ifpast == true}">
<view class="coupon-circle-top">
<view class="coupon-circle1"></view>
</view>
<view class="coupon-circle-bottom">
<view class="coupon-circle1"></view>
</view>
<view class="coupon-radius">
<view class="coupon-left">
<view class="lf-font-36 lf-color-white" style="line-height: 1;" v-if="item.discount.action_type.type == 'cash'">
<text>￥</text>
<text class="lf-font-70 lf-font-bold">{{item.discount.action_type.value}}</text>
</view>
<view class="lf-font-36 lf-color-white" style="line-height: 1;" v-if="item.discount.action_type.type == 'discount'">
<text class="lf-font-70 lf-font-bold">{{item.discount.action_type.value}}</text>
<text>%</text>
</view>
<view class="coupon-tag" v-if="item.used_at != ''">
已使用
</view>
<view class="coupon-tag" v-if="item.ifpast">
已过期
</view>
<view class="coupon-tag" v-if="!item.ifpast && item.used_at == ''">
待使用
</view> </view>
</view> </view>
<view class="coupon-right">
<view class="lf-font-32 lf-font-bold lf-color-white">{{item.discount.title}}</view>
<view class="lf-font-24 lf-color-white">有效期{{item.discount.starts_at}}~{{item.discount.ends_at}}</view>
</view> </view>
</view> </view>
</view>
</view>
<!-- 不使用优惠券 -->
<view class="lf-flex">
<radio-group @change="couponChange">
<radio value="null" :checked="coupon_index == null"></radio>
</radio-group>
<view>不使用优惠券</view>
</view>
</view>
</u-popup>
</block>
</view>
</template> </template>
<script> <script>
export default { export default {
data(){ data(){
return { return {
mode: 1, // 1邮寄，2自提
value: '' // 备注
mode: 0, // 0邮寄，1自提
value: '', // 备注
token: '',
address: {},
address_id: null,
order_detail: {coupons: []},
show_coupon: false,
coupon_index: null
}
},
computed: {
showCouponTitle(){
if(this.coupon_index != null){
return this.order_detail.coupons[this.coupon_index].discount.title;
}else{
if(this.order_detail.coupons.length){
return '不使用优惠券';
}else{
return '暂无可用优惠券';
}
}
} }
}, },
onLoad(){ onLoad(){
this.token = this.$cookieStorage.get('user_token');
let options = this.$cookieStorage.get('order_confirm');
if(this.$isRight(options)){
this.orderCheckout(options);
}
},
onUnload(){
this.$cookieStorage.clear('order_confirm');
},
onShow(){
if(this.address_id){
this.getSelectAddress();
}
}, },
methods: { methods: {
// 生成临时订单
orderCheckout(options){
uni.showLoading({
title: '正在生成订单'
})
this.$http.post({
api: 'api/shopping/order/checkout',
data: options,
header: {
Authorization: this.token
}
}).then(res => {
let detail = res.data.data;
this.order_detail = detail;
this.address = res.data.data.address;
uni.hideLoading()
}).catch(err => uni.hideLoading())
},
// 获取默认地址
getDefaultAddress(){
this.$http.get({
api: 'api/address/default',
header: {
Authorization: this.token
}
}).then(res => {
this.address = res.data.data || {};
})
},
// 获取用户自己选择的地址
getSelectAddress(){
this.$http.get({
api: 'api/address/'+ this.address_id,
header: {
Authorization: this.token
}
}).then(res => {
this.address = res.data.data || {};
})
},
// 打开选择优惠券
openCheckCoupon(){
if(this.order_detail.coupons.length){
this.show_coupon = true;
}else{
this.$msg('您没有可用的优惠券哦');
}
},
// 提交订单
confirm(){
this.$http.post({
api: 'api/shopping/order/confirm',
data: {
order_no: this.order_detail.order.order_no,
// discount_id: 0, // 优惠券id? TODO
pick_self: this.mode, // 0 配送，1自提
address_id: this.address.id,
note: this.value
},
header: {
Authorization: this.token
}
}).then(res => {
console.log("`````````", res);
if(res.data.code == 200 || res.data.code == true){
let order = res.data.data.order;
let url = '/pages/order/cashier/cashier';
url += '?amount='+ order.total_yuan;
url += '&order_no='+ order.order_no;
this.$url(url, {type: 'redirect'});
}else{
this.$msg(res.data.message);
}
})
},
// 选择优惠券
couponChange(event){
if(event.detail.value == 'null'){
this.coupon_index = null;
}else{
this.coupon_index = Number(event.detail.value);
}
}
} }
} }
</script> </script>
@ -210,4 +375,122 @@
} }
} }
} }
.popup-content{
width: 750rpx;
height: max-content;
max-height: 70vh;
overflow-y: scroll;
padding: 40rpx 32rpx;
background: #FFFFFF;
}
.coupon-circle1 {
width: 40rpx;
height: 40rpx;
background-color: white;
border-radius: 50%;
}
.coupon-circle-top {
width: 50rpx;
height: 50rpx;
border-radius: 50%;
// background-color: red;
position: absolute;
border: 1px dashed #ccc;
left: 190rpx;
top: -20rpx;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
}
.coupon-circle-bottom {
width: 50rpx;
height: 50rpx;
border-radius: 50%;
// background-color: red;
position: absolute;
border: 1px dashed #ccc;
left: 190rpx;
bottom: -20rpx;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
}
.coupon-right {
text-align: left;
justify-content: center;
align-items: flex-start;
display: flex;
flex-direction: column;
margin-left: 90rpx;
}
.coupon-left {
margin-left: 30rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.coupon-tag {
width: max-content;
margin-top: 10rpx;
padding: 0 24rpx;
height: 43rpx;
border-radius: 22rpx;
border: 2rpx solid #FFFFFF;
font-size: 24rpx;
color: white;
}
.coupon-wrap {
display: flex;
justify-content: center;
margin-top: 30rpx;
flex-direction: column;
align-content: center;
align-items: center;
}
.coupon-card {
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
// width: 674rpx;
width: 626rpx;
height: 171rpx;
background: #15716E;
border-radius: 20rpx;
}
.invalid-bg{
background-color: #999999;
}
.coupon-radius {
// width: 664rpx;
width: 616rpx;
display: flex;
height: 161rpx;
border: 1rpx dashed #ccc;
// background: #15716E;
border-radius: 20rpx;
}
/deep/.u-scroll-box {
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
}
/deep/.special_tab .u-tabs .u-scroll-box .u-tab-bar {
background-color: #15716E!important;
width: 80rpx!important;
position: absolute;
height: 10rpx;
left: 0;
border-radius: 8rpx 8rpx 0px 0px!important;
bottom: -12rpx;
}
/deep/ .u-tab-item {
font-size: 28rpx!important;
}
</style> </style>

135
pages/shop/goodsdetail.vue
View File

@ -4,7 +4,7 @@
<skeleton :loading="skeletonLoading" :row="12" :showAvatar="false" :showTitle="true"> <skeleton :loading="skeletonLoading" :row="12" :showAvatar="false" :showTitle="true">
<block> <block>
<!-- 商品图片轮播 --> <!-- 商品图片轮播 -->
<swiper :current="current" :indicator-dots="2 > 1 ? false : true" :circular="true" class="swiper-box" indicator-active-color="#1998FE">
<swiper :current="current" :indicator-dots="pictures.length > 1" :circular="true" class="swiper-box" indicator-active-color="#1998FE">
<swiper-item v-for="(item, index) in pictures" :key="index"> <swiper-item v-for="(item, index) in pictures" :key="index">
<image mode="aspectFill" :src="item" style="width: 100%; height: 100%;" @click="lookImg(index)"></image> <image mode="aspectFill" :src="item" style="width: 100%; height: 100%;" @click="lookImg(index)"></image>
<view class="seckill-box" v-if="type == 'seckill'"> <view class="seckill-box" v-if="type == 'seckill'">
@ -85,11 +85,10 @@
</block> </block>
<!-- 商品选择规格 --> <!-- 商品选择规格 -->
<view class="bg-white"> <view class="bg-white">
<!-- todo 选择后显示 -->
<view class="cu-bar padding-lr" @click="shoot(2)"> <view class="cu-bar padding-lr" @click="shoot(2)">
<view class="lf-flex"> <view class="lf-flex">
<text class="lf-color-777 lf-font-28">选择</text> <text class="lf-color-777 lf-font-28">选择</text>
<text class="lf-color-222 lf-font-26 lf-m-l-30">选中的商品规格TODO</text>
<text class="lf-color-222 lf-font-26 lf-m-l-30">{{ showSpec }}</text>
</view> </view>
<view> <view>
<text class="lf-font-24 lf-color-777 lf-iconfont icon-xiangyou"></text> <text class="lf-font-24 lf-color-777 lf-iconfont icon-xiangyou"></text>
@ -99,7 +98,7 @@
<self-line></self-line> <self-line></self-line>
<!-- 店铺信息 --> <!-- 店铺信息 -->
<view>
<view v-if="type != 'point'">
<view class="user-top"> <view class="user-top">
<view class="lf-row-between lf-w-100"> <view class="lf-row-between lf-w-100">
<view class="lf-flex" @click="$url('/pages/shop/shopdetail?id='+ brand_detail.id)"> <view class="lf-flex" @click="$url('/pages/shop/shopdetail?id='+ brand_detail.id)">
@ -184,14 +183,13 @@
<!-- 加入购物车、立即购买模态框选规格 --> <!-- 加入购物车、立即购买模态框选规格 -->
<u-popup v-model="show_popup" mode="bottom" :round="true" borderRadius="20"> <u-popup v-model="show_popup" mode="bottom" :round="true" borderRadius="20">
<!-- todo 高度问题优化 -->
<view class="popup-content"> <view class="popup-content">
<!-- 商品信息及关闭按钮 --> <!-- 商品信息及关闭按钮 -->
<view class="popup-head"> <view class="popup-head">
<view class="lf-flex"> <view class="lf-flex">
<image class="goods-img" :src="goods_detail.img"></image> <image class="goods-img" :src="goods_detail.img"></image>
<view class="goods-info"> <view class="goods-info">
<view class="price">¥{{ goods_detail.min_price }}-¥{{ goods_detail.max_price }}</view>
<view class="price">{{ showGoodsSpecPrice }}</view>
<view class="goods-name">{{ goods_detail.name }}</view> <view class="goods-name">{{ goods_detail.name }}</view>
</view> </view>
</view> </view>
@ -205,7 +203,7 @@
<view class="lf-flex-wrap"> <view class="lf-flex-wrap">
<view :class="{ <view :class="{
'spec-item': true, 'spec-item': true,
'spec-active': item.spec_current === index}"
'spec-active': value.spec_current === index}"
@click="activeSpec(key, index)" @click="activeSpec(key, index)"
v-for="(item, index) in value.list" v-for="(item, index) in value.list"
:key="index">{{ item.value }} :key="index">{{ item.value }}
@ -228,7 +226,7 @@
</view> </view>
</view> </view>
<!-- 操作按钮 --> <!-- 操作按钮 -->
<button class="comfirm-btn" @click="confirm">{{ click_type == 1 ? '加入购物车' : '立即购买' }}</button>
<button class="comfirm-btn" @click="specConfirm">{{ click_type == 1 ? '加入购物车' : '立即购买' }}</button>
</view> </view>
</u-popup> </u-popup>
@ -269,11 +267,42 @@
goods_num: 1 goods_num: 1
} }
}, },
computed: {
showGoodsSpecPrice(){
let goods_detail = this.goods_detail;
let stores = this.goods_stock.stores;
let specs = this.goods_stock.specs;
let specId = 1;
if(!this.$isRight(specs[specId])){
return `￥${goods_detail.min_price} - ￥${goods_detail.max_price}`;
}
let spec_current = specs[specId].spec_current;
if(specs[specId].spec_current != null){
let id = specs[specId].list[spec_current].id;
return "￥"+ stores[specId +'-'+ id].price;
}else{
return `￥${goods_detail.min_price} - ￥${goods_detail.max_price}`;
}
},
showSpec(){
let specs = this.goods_stock.specs;
let str = '';
for(let i in specs){
if(specs[i].spec_current != null){
str += specs[i].list[specs[i].spec_current].value +';';
}
}
if(str == ''){
str = '请选择规格'
}
return str;
}
},
onLoad(options){ onLoad(options){
console.log("options", options) console.log("options", options)
this.token = this.$cookieStorage.get('user_token'); this.token = this.$cookieStorage.get('user_token');
this.goods_id = options.id; this.goods_id = options.id;
// this.type = options.type || 'mail'; // TODO 改变思路，不是由外界控制
this.getNewdetail(); this.getNewdetail();
this.getGoodsStock(); // 获取商品库存、规格信息 this.getGoodsStock(); // 获取商品库存、规格信息
}, },
@ -313,13 +342,28 @@
this.confirm(); this.confirm();
} }
}, },
// 选规格提交
specConfirm(){
let specs = this.goods_stock.specs;
let flag = true;
for(let i in specs){
if(specs[i].spec_current == null){
flag = false;
}
}
if(flag){
this.confirm();
}else{
this.$msg('您未选完整规格')
}
},
// 商品选规格 // 商品选规格
activeSpec(key, index){ activeSpec(key, index){
let obj = this.goods_stock.specs; let obj = this.goods_stock.specs;
if(obj[key].spec_current == index){
obj[key].spec_current = null;
if(obj[key]['spec_current'] == index){
obj[key]['spec_current'] = null;
}else{ }else{
obj[key].spec_current = index;
obj[key]['spec_current'] = index;
} }
this.$set(this.goods_stock, 'specs', obj); this.$set(this.goods_stock, 'specs', obj);
}, },
@ -337,8 +381,65 @@
}, },
// 跳转至下单页TODO // 跳转至下单页TODO
confirm(){ confirm(){
if(this.click_type == 2){
let goods_detail = this.goods_detail;
let specs = this.goods_stock.specs;
let stores = this.goods_stock.stores;
let par = {
attributes: {
color: specs[2].list[specs[2].spec_current].value,
com_id: goods_detail.id,
img: goods_detail.img,
size: specs[1].list[specs[1].spec_current].value,
sku: goods_detail.goods_no +'-'+ specs[1].list[specs[1].spec_current].value
},
id: stores[1 +'-'+ specs[1].list[specs[1].spec_current].id].id,
product_id: stores[1 +'-'+ specs[1].list[specs[1].spec_current].id].id,
market_price: goods_detail.market_price,
name: goods_detail.name,
price: stores[1 +'-'+ specs[1].list[specs[1].spec_current].id].price,
qty: this.goods_num,
store_count: stores[1 +'-'+ specs[1].list[specs[1].spec_current].id].store
}
uni.showLoading({
title: '正在提交'
})
this.show_popup = false;
if(this.click_type == 1){
// 加入购物车
this.$http.post({
api: 'api/shopping/cart',
data: {"0": par},
header: {
Authorization: this.token
}
}).then(res => {
if(res.data.code == 200){
this.$msg('加入购物车成功', {icon: 'success'})
}else{
this.$msg('加入购物车失败', {icon: 'error'})
}
uni.hideLoading()
}).catch(err => uni.hideLoading())
}else if(this.click_type == 2){
// 直接结算
this.$cookieStorage.set('order_confirm', par);
uni.hideLoading();
this.$url('/pages/order/confirm/confirm'); this.$url('/pages/order/confirm/confirm');
// this.$http.post({
// api: 'api/shopping/order/checkout',
// data: par,
// header: {
// Authorization: this.token
// }
// }).then(res => {
// if(res.data.code == 200){
// this.$url('/pages/order/confirm/confirm');
// }else{
// this.$msg('提交失败', {icon: 'error'})
// }
// uni.hideLoading()
// }).catch(err => uni.hideLoading())
} }
}, },
// 点击页面分享按钮 // 点击页面分享按钮
@ -436,7 +537,11 @@
this.$http.get({ this.$http.get({
api: `api/store/detail/${this.goods_id}/stock` api: `api/store/detail/${this.goods_id}/stock`
}).then(res => { }).then(res => {
this.goods_stock = res.data.data;
let data = res.data.data;
for(let i in data.specs){
data.specs[i].spec_current = null;
}
this.goods_stock = data;
}) })
}, },
// 拨打电话 // 拨打电话
@ -781,6 +886,8 @@
background: #FFFFFF; background: #FFFFFF;
border-radius: 20rpx 20rpx 0rpx 0rpx !important; border-radius: 20rpx 20rpx 0rpx 0rpx !important;
padding: 40rpx 32rpx; padding: 40rpx 32rpx;
max-height: 80vh;
overflow-y: scroll;
.popup-head{ .popup-head{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

2
pages/shop/seckillList.vue
View File

@ -5,7 +5,7 @@
@scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh"> @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
<view class="content"> <view class="content">
<view class="card" v-for="(item, index) in list" :key="index" <view class="card" v-for="(item, index) in list" :key="index"
@click="$url('/pages/shop/goodsdetail?type=seckill&id='+ item.goods.id)">
@click="$url('/pages/shop/goodsdetail?id='+ item.goods.id)">
<view class="goods-img"> <view class="goods-img">
<image class="img" :src="item.goods.img"></image> <image class="img" :src="item.goods.img"></image>
<view class="tips lf-line-1">已有{{item.sell_num}}人购买</view> <view class="tips lf-line-1">已有{{item.sell_num}}人购买</view>

2
pages/shop/shopdetail.vue
View File

@ -48,7 +48,7 @@
</view> </view>
</view> </view>
<view class="recommend-box" > <view class="recommend-box" >
<view class="goods-rom" v-for="(item,index) of detail.goods" :key="index" v-if="detail.goods.length" @click="$url('/pages/shop/goodsdetail?type=mail&goods_id='+item.id)">
<view class="goods-rom" v-for="(item,index) of detail.goods" :key="index" v-if="detail.goods.length" @click="$url('/pages/shop/goodsdetail?id='+item.id)">
<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.img" :index="index"> <u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.img" :index="index">
<view class="list-label">已售{{item.sale_count}}</view> <view class="list-label">已售{{item.sale_count}}</view>
</u-lazy-load> </u-lazy-load>

76
pages/store/cart/cart.vue
View File

@ -9,7 +9,7 @@
<text class="lf-color-black lf-font-28 lf-font-bold lf-m-l-10">{{ s_item.name }}</text> <text class="lf-color-black lf-font-28 lf-font-bold lf-m-l-10">{{ s_item.name }}</text>
<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10"></text> <text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10"></text>
</view> </view>
<view class="lf-row-between">
<view class="lf-row-between" v-if="s_item.full_minus">
<view class="lf-flex"> <view class="lf-flex">
<view class="gray-tag">满减</view> <view class="gray-tag">满减</view>
<view class="lf-m-l-15 lf-font-24 lf-color-333">{{s_item.full_minus}}</view> <view class="lf-m-l-15 lf-font-24 lf-color-333">{{s_item.full_minus}}</view>
@ -24,11 +24,11 @@
<u-checkbox shape="circle" active-color="#15716E" @change="goodsCheckChange($event, s_index, g_index)" v-model="g_item.checked"></u-checkbox> <u-checkbox shape="circle" active-color="#15716E" @change="goodsCheckChange($event, s_index, g_index)" v-model="g_item.checked"></u-checkbox>
</u-checkbox-group> </u-checkbox-group>
<view class="lf-m-t-30" style="display: flex;"> <view class="lf-m-t-30" style="display: flex;">
<image class="content-img" :src="g_item.img" mode="aspectFill" @click="$url('/pages/shop/goodsdetail')"></image>
<image class="content-img" :src="g_item.img" mode="aspectFill" @click="$url('/pages/shop/goodsdetail?id='+ g_item.com_id)"></image>
<view class="lf-m-l-15 content-info"> <view class="lf-m-l-15 content-info">
<view class="lf-color-333 lf-font-26 lf-line-2" style="max-width: 480rpx;">{{g_item.name}}</view> <view class="lf-color-333 lf-font-26 lf-line-2" style="max-width: 480rpx;">{{g_item.name}}</view>
<view class="lf-font-24 lf-color-777 lf-m-t-14 lf-row-between"> <view class="lf-font-24 lf-color-777 lf-m-t-14 lf-row-between">
<view>{{g_item.count}}件；{{g_item.spec}}</view>
<view>{{g_item.qty}}件;{{g_item.color}};{{g_item.size}}</view>
<view class="lf-font-32 lf-color-price">￥{{ g_item.price }}</view> <view class="lf-font-32 lf-color-price">￥{{ g_item.price }}</view>
</view> </view>
</view> </view>
@ -96,7 +96,7 @@
s.goods.map(g => { s.goods.map(g => {
if(g.checked){ if(g.checked){
total_count++; total_count++;
total_price += (g.price * g.count)
total_price += (g.price * g.qty)
} }
}) })
}) })
@ -118,39 +118,20 @@
} }
}).then(res => { }).then(res => {
console.log("===", res); console.log("===", res);
// TODO 此处为假数据 ------------------
let list = [{
name: '精品超市',
full_minus: '母婴产品教师节满1200减200',
goods: [{
checked: false,
img: 'https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png',
name: '爱他美较大婴儿配方奶粉较大婴儿配方奶粉较大婴儿配方奶粉2段 900g',
count: 1,
spec: '900g',
price: '385'
},{
checked: false,
img: 'https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png',
name: '基尼泰煤2000G',
count: 2,
spec: '900g',
price: '197'
}]
},{
name: '精品超市',
full_minus: '母婴产品教师节满1200减200',
goods: [{
checked: false,
img: 'https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png',
name: '爱他美较大婴儿配方奶粉较大婴儿配方奶粉较大婴儿配方奶粉2段 900g',
count: 4,
spec: '900g',
price: '99'
}]
}]
let data = res.data.data;
let list = [];
for(let i in data){
let goods = data[i].goods.map(item => {
item.checked = false;
return item;
})
list.push({
name: data[i].name,
full_minus: '',
goods: goods
})
}
this.list = list; this.list = list;
// TODO 此处为假数据 end --------------
}) })
}, },
// 商品被勾选 // 商品被勾选
@ -173,7 +154,30 @@
// 结算 // 结算
submit(){ submit(){
if(this.total_count){ if(this.total_count){
let brand = [];
let cart_ids = [];
this.list.map(item => {
let checked = item.goods.every(g => g.checked);
item.goods.map(g => {
if(g.checked){
cart_ids.push(g.__raw_id);
}
})
if(checked){
brand.push(item.name);
}
})
if(brand.length > 1){
this.$msg('只支持单个店铺结算哦');
}else{
let par = {
cart_ids: cart_ids,
type: "normal",
wechat_group_id: ""
};
this.$cookieStorage.set('order_confirm', par);
this.$url('/pages/order/confirm/confirm'); this.$url('/pages/order/confirm/confirm');
}
}else{ }else{
this.$msg('您未选择需要结算的商品'); this.$msg('您未选择需要结算的商品');
} }

Write Preview
Loading…
Cancel
Save