parent
db4618b5a1
commit
08f2931abf
@ -1,22 +0,0 @@ |
|||||||
<template> |
|
||||||
<view> |
|
||||||
|
|
||||||
</view> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
|
||||||
data() { |
|
||||||
return { |
|
||||||
|
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style> |
|
||||||
|
|
||||||
</style> |
|
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 9.1 KiB |
Before Width: | Height: | Size: 40 KiB |
After Width: | Height: | Size: 7.5 KiB |
After Width: | Height: | Size: 742 B |
@ -0,0 +1,103 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
<image src="../static/phone.png" class="width20w mart20" mode="widthFix"></image> |
||||||
|
<view class="font14 fotct fcor333">话费充值</view> |
||||||
|
<view class="fotct font48 fcor333 mart10">{{phoneorderdes.orderPrice}}<text class="font14">元</text></view> |
||||||
|
<view class="linec6 width90 mart10"></view> |
||||||
|
<view class="width90 mart20 fcor666 font18"> |
||||||
|
交易状态 : <text class="paysuc"> 支付成功</text> |
||||||
|
</view> |
||||||
|
<view class="width90 mart15 height22"> |
||||||
|
<view class="flleft fcor333 width50 font15">订单流水号</view> |
||||||
|
<view class="flright fcor666 width50 fotrt font13">{{phoneorderdes.orderNo}}</view> |
||||||
|
</view> |
||||||
|
<view class="width90 mart15 height22"> |
||||||
|
<view class="flleft fcor333 width50 font15">创建消费订单</view> |
||||||
|
<view class="flright fcor666 width50 fotrt font13">{{phoneorderdes.orderPrice}}元</view> |
||||||
|
</view> |
||||||
|
<view class="width90 fcor666 font13"> |
||||||
|
{{phoneorderdes.createTimed | timeFormat('yyyy-mm-dd')}} {{phoneorderdes.createTimed | timeFormat('hh:mm')}} |
||||||
|
</view> |
||||||
|
<view class="width90 mart15 height22"> |
||||||
|
<view class="flleft fcor333 width50 font15">支付成功</view> |
||||||
|
<view class="flright fcor666 width50 fotrt font13">{{phoneorderdes.payPrice}}元</view> |
||||||
|
</view> |
||||||
|
<view class="width90 fcor666 font13"> |
||||||
|
{{phoneorderdes.payTime | timeFormat('yyyy-mm-dd')}} {{phoneorderdes.payTime | timeFormat('hh:mm')}} |
||||||
|
</view> |
||||||
|
<view class="linec6 width90 mart10"></view> |
||||||
|
|
||||||
|
<view class="width90 mart10 fcor333 font15"> |
||||||
|
话费充值 : {{phoneorderdes.userPhone}}|{{phoneorderdes.remarks}} |
||||||
|
</view> |
||||||
|
<view class="width90 mart15 height22"> |
||||||
|
<view class="flleft fcor333 width50 font15">订单总额</view> |
||||||
|
<view class="flright fcor666 width50 fotrt font13">{{phoneorderdes.orderPrice}}元</view> |
||||||
|
</view> |
||||||
|
<view class="width90 mart15 height22"> |
||||||
|
<view class="flleft fcor333 width50 font15">优惠</view> |
||||||
|
<view class="flright fcor666 width50 fotrt font13">{{phoneorderdes.deductionPrice}}元</view> |
||||||
|
</view> |
||||||
|
<view class="width90 mart15 height22"> |
||||||
|
<view class="flleft fcor333 width50 font15">实际支付金额</view> |
||||||
|
<view class="flright fcor666 width50 fotrt font13">{{phoneorderdes.payRealPrice}}元</view> |
||||||
|
</view> |
||||||
|
<view class="width100 height90"></view> |
||||||
|
<button class="coupne-btn width100" @click="toUser">个人中心</button> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { |
||||||
|
getPhoneOrderById |
||||||
|
} from '../../Utils/Api.js'; |
||||||
|
let app = getApp(); |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
orderid: '', |
||||||
|
phoneorderdes:'' |
||||||
|
} |
||||||
|
}, |
||||||
|
onLoad(options) { |
||||||
|
this.orderid = options.id; |
||||||
|
this.getPhoneOrderById(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
//跳转到我的页面 |
||||||
|
toUser() { |
||||||
|
uni.switchTab({ |
||||||
|
url: '../../pages/tabBar/user/user' |
||||||
|
}); |
||||||
|
}, |
||||||
|
getPhoneOrderById() { |
||||||
|
let params = { |
||||||
|
orderId: this.orderid |
||||||
|
} |
||||||
|
getPhoneOrderById(params).then(res => { |
||||||
|
if (res.return_code == '000000') { |
||||||
|
this.phoneorderdes = res.return_data; |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
page { |
||||||
|
background-color: #f7f7f7; |
||||||
|
} |
||||||
|
|
||||||
|
.paysuc { |
||||||
|
color: #81bd3f; |
||||||
|
} |
||||||
|
|
||||||
|
.coupne-btn { |
||||||
|
position: fixed; |
||||||
|
bottom: 0px; |
||||||
|
background-color: #089bf5; |
||||||
|
color: #FFFFFF; |
||||||
|
border-radius: 0px; |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,35 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
<image src="../static/coupsucces.png" mode="widthFix" class="sucimg mart30"></image> |
||||||
|
<view class="width90 clor4cd964 mart30 font18 fotct">支付成功</view> |
||||||
|
<view class="width90 height45l backcor89 fcorfff fotct border-r mart80" @click="jumpcoupon">查看我的优惠券</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
jumpcoupon(){ |
||||||
|
uni.switchTab({ |
||||||
|
url:'../../pages/tabBar/user/user' |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.sucimg { |
||||||
|
width: 20%; |
||||||
|
margin-left: 40%; |
||||||
|
} |
||||||
|
|
||||||
|
.clor4cd964 { |
||||||
|
color: #4cd964; |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,908 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
|
||||||
|
<view class="width94 comorder mart10"> |
||||||
|
<view class="height100p width94 goodsimg"> |
||||||
|
<image class="flleft" mode="widthFix" :src="imageUrl+couponList.packageDetail.listImg"></image> |
||||||
|
<view class="tcrig"> |
||||||
|
<view class="font18 fontwig6 fcor333 text1">{{couponList.packageDetail.title}}</view> |
||||||
|
<view class="font13 fcor666 mart10">规格: 默认</view> |
||||||
|
<view class="price-number mart10"> |
||||||
|
<view class="price font16">¥{{couponList.packageDetail.price}}</view> |
||||||
|
<view class="flright fotrt paddleft10">x1</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="width94 line1 mart5 marb5"></view> |
||||||
|
<view class="height50 width100 backcorfff"> |
||||||
|
<view class="width50 flleft fcor333 fontwig6 font16" style="padding-left: 4%;"> |
||||||
|
商品总额 |
||||||
|
</view> |
||||||
|
<view class="width40 flright fotrt paddtright10 font15 fontwig6 fcor999"> |
||||||
|
¥{{couponList.packageDetail.price}} |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="width94 comorder mart10"> |
||||||
|
<view class="height50 width100 backcorfff"> |
||||||
|
<view class="width50 flleft fcor333 fontwig6 font16" style="padding-left: 4%;"> |
||||||
|
支付方式 |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="width94 line1 mart5 marb5"></view> |
||||||
|
<view class="height50 width100 backcorfff" @tap="paytype='jinbi'"> |
||||||
|
<view class="width70 flleft fcor333 fontwig6 font16 text1" style="padding-left: 4%;"> |
||||||
|
积分支付<text class="font14 fcor666 margle">可用积分: {{user.gold}}</text> |
||||||
|
</view> |
||||||
|
<view class="width20 flright fotrt paddtright10 font15 fontwig6 fcor666 alijun" |
||||||
|
style="align-items: center;"> |
||||||
|
<radio :checked="paytype=='jinbi'" color="#0083f5" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="width94 line1 mart5 marb5"></view> |
||||||
|
<view class="height50 width100 backcorfff" @tap="paytype='weixin'"> |
||||||
|
<view class="width50 flleft fcor333 fontwig6 font16" style="padding-left: 4%;"> |
||||||
|
微信支付 |
||||||
|
</view> |
||||||
|
<view class="width40 flright fotrt paddtright10 font15 fontwig6 fcor666 alijun" |
||||||
|
style="align-items: center;"> |
||||||
|
<radio :checked="paytype=='weixin'" color="#0083f5" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="width94 line1 mart5 marb5"></view> |
||||||
|
<view class="height50 width100 backcorfff" @tap="paytype='gonghuika'"> |
||||||
|
<view class="width70 flleft fcor333 fontwig6 font16 text1" style="padding-left: 4%;"> |
||||||
|
汇联通工会卡<text class="font14 fcor666 margle">可用余额: {{tongCardPrice}}元</text> |
||||||
|
</view> |
||||||
|
<view class="width20 flright fotrt paddtright10 font15 fontwig6 fcor666 alijun" |
||||||
|
style="align-items: center;"> |
||||||
|
<radio :checked="paytype=='gonghuika'" @click="changeRiado()" color="#0083f5" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="width100 height60"></view> |
||||||
|
<view class="footer"> |
||||||
|
<view class="settlement"> |
||||||
|
<view class="sum">实付:<view class="money" v-if="paytype != 'jinbi'">¥{{paytheprice}}</view> |
||||||
|
<view class="money aliitem" v-else> |
||||||
|
<image style="width: 15px;height: 15px;vertical-align: sub;" src="../../static/img/jfx.png"> |
||||||
|
</image>{{paytheprice*100}} |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<!-- #ifdef MP --> |
||||||
|
<button class="btn" open-type="getPhoneNumber" v-if="user == null" |
||||||
|
@getphonenumber="loginByPhone">立即支付</button> |
||||||
|
<button class="btn" v-else @tap="toPay">立即支付</button> |
||||||
|
<!-- #endif --> |
||||||
|
<!-- #ifdef H5 --> |
||||||
|
<button class="btn" v-if="user.phone == null" @click="jumpH5Bding">立即支付</button> |
||||||
|
<button class="btn" v-else @tap="toPay">立即支付</button> |
||||||
|
<!-- #endif --> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<ssPaymentPassword ref="paymentPassword" :mode="1" @submit="submitHandle" /> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { |
||||||
|
addOrder, |
||||||
|
getDiscountPackageDetail, |
||||||
|
loginByPhone, |
||||||
|
orderToPay, |
||||||
|
orderToGoldPay, |
||||||
|
findUser, |
||||||
|
hltUnionCardPay, |
||||||
|
getHuiLianTongCardBalance |
||||||
|
} from '../../Utils/Api.js'; |
||||||
|
import ssPaymentPassword from '../../components/sanshui-payment-password' |
||||||
|
let app = getApp(); |
||||||
|
// #ifdef H5 |
||||||
|
var jweixin = require('jweixin-module'); |
||||||
|
// #endif |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
ssPaymentPassword |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
buylist: [], //订单列表 |
||||||
|
goodsPrice: 0.0, //商品合计价格 |
||||||
|
sumPrice: 0.0, //用户付款价格 |
||||||
|
freight: 12.00, //运费 |
||||||
|
note: '', //备注 |
||||||
|
int: 1200, //抵扣积分 |
||||||
|
deduction: 0, //抵扣价格 |
||||||
|
couponId: '', |
||||||
|
couponList: [], |
||||||
|
UserNormalDiscountList: [], |
||||||
|
imageUrl: app.globalData.imgUrl, |
||||||
|
deductionPrice: '0.00', |
||||||
|
paytheprice: '', |
||||||
|
radioStatus: true, |
||||||
|
memDiscountId: '', |
||||||
|
user: '', |
||||||
|
paytype: '', |
||||||
|
PaymentPassword: '', |
||||||
|
orderId: '', |
||||||
|
jumpType: '', |
||||||
|
tongCardPrice: 0, |
||||||
|
storeId: '', |
||||||
|
isDiscont: false |
||||||
|
|
||||||
|
}; |
||||||
|
}, |
||||||
|
onLoad(option) { |
||||||
|
this.couponId = option.id; |
||||||
|
this.getDiscountPackageDetail(); |
||||||
|
}, |
||||||
|
onShow() { |
||||||
|
let that = this; |
||||||
|
that.paytype = ''; |
||||||
|
that.user = app.globalData.userInfo; |
||||||
|
that.findUser(); |
||||||
|
}, |
||||||
|
onHide() { |
||||||
|
|
||||||
|
}, |
||||||
|
onBackPress() { |
||||||
|
//页面后退时候,清除订单信息 |
||||||
|
}, |
||||||
|
filters: { |
||||||
|
toFixed: function(x) { |
||||||
|
return parseFloat(x).toFixed(2); |
||||||
|
}, |
||||||
|
//过滤器 用于格式化时间 |
||||||
|
formatDate: function(value, spe = '/') { |
||||||
|
let data = new Date(value); |
||||||
|
let year = data.getFullYear(); |
||||||
|
let month = data.getMonth() + 1; |
||||||
|
let day = data.getDate(); |
||||||
|
let h = data.getHours(); |
||||||
|
let mm = data.getMinutes(); |
||||||
|
let s = data.getSeconds(); |
||||||
|
month = month >= 10 ? month : "0" + month; |
||||||
|
day = day >= 10 ? day : "0" + day; |
||||||
|
h = h >= 10 ? h : "0" + h; |
||||||
|
mm = mm >= 10 ? mm : "0" + mm; |
||||||
|
s = s >= 10 ? s : "0" + s; |
||||||
|
return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`; |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
//查询积分 |
||||||
|
findUser() { |
||||||
|
let params; |
||||||
|
findUser(params).then(res => { |
||||||
|
if (res.return_code == '000000') { |
||||||
|
app.globalData.userInfo = res.return_data; |
||||||
|
this.user = res.return_data; |
||||||
|
this.getHuiLianTongCardBalance(); |
||||||
|
uni.setStorage({ |
||||||
|
key: "user", |
||||||
|
data: res.return_data |
||||||
|
}) |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
//查询优惠券包详情 |
||||||
|
getDiscountPackageDetail() { |
||||||
|
uni.showLoading({ |
||||||
|
title: '加载中...' |
||||||
|
}) |
||||||
|
let params = { |
||||||
|
packageId: this.couponId |
||||||
|
} |
||||||
|
getDiscountPackageDetail(params).then(res => { |
||||||
|
uni.hideLoading(); |
||||||
|
if (res.return_code == '000000') { |
||||||
|
this.couponList = res.return_data; |
||||||
|
this.paytheprice = res.return_data.packageDetail.price; |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
//显示弹出 |
||||||
|
showPopup() { |
||||||
|
this.$refs.popup.show(); |
||||||
|
}, |
||||||
|
//查询工会卡余额 |
||||||
|
//查询详情 |
||||||
|
getHuiLianTongCardBalance() { |
||||||
|
let params = { |
||||||
|
cardNo: this.user.hltCardNo.cardNo |
||||||
|
} |
||||||
|
getHuiLianTongCardBalance(params).then(res => { |
||||||
|
if (res.return_code == '000000') { |
||||||
|
this.tongCardPrice = res.return_data.balance; |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
}, |
||||||
|
// H5获取手机号 |
||||||
|
jumpH5Bding() { |
||||||
|
uni.navigateTo({ |
||||||
|
url:'../../pages/login/register' |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 微信获取手机号 |
||||||
|
loginByPhone(PhoneNumber) { |
||||||
|
if (PhoneNumber.detail.iv == undefined) { |
||||||
|
uni.showToast({ |
||||||
|
title: "用户取消授权", |
||||||
|
icon: "none" |
||||||
|
}); |
||||||
|
return; |
||||||
|
} |
||||||
|
let params = { |
||||||
|
openId: app.globalData.openId, |
||||||
|
iv: PhoneNumber.detail.iv, |
||||||
|
encryptedData: PhoneNumber.detail.encryptedData |
||||||
|
} |
||||||
|
loginByPhone(params).then(res => { |
||||||
|
if (res.return_code == '000000') { |
||||||
|
app.globalData.userInfo = res.return_data |
||||||
|
.object |
||||||
|
.highUser; |
||||||
|
this.user = res.return_data |
||||||
|
.object |
||||||
|
.highUser; |
||||||
|
app.globalData.token = res.return_data.uniqueCode; |
||||||
|
uni.setStorage({ |
||||||
|
key: "token", |
||||||
|
data: res.return_data.uniqueCode |
||||||
|
}) |
||||||
|
uni.setStorage({ |
||||||
|
key: "user", |
||||||
|
data: res.return_data |
||||||
|
.object |
||||||
|
.highUser |
||||||
|
}) |
||||||
|
let that = this; |
||||||
|
that.toPay(); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
toPay() { |
||||||
|
if (this.paytype == '') { |
||||||
|
uni.showToast({ |
||||||
|
title: '请选择支付方式', |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
return; |
||||||
|
} |
||||||
|
uni.showLoading({ |
||||||
|
title: '提交订单中...' |
||||||
|
}) |
||||||
|
if (this.couponList.reserveStatus) { |
||||||
|
this.storeId = app.globalData.storeid |
||||||
|
} |
||||||
|
let goods = { |
||||||
|
"highChildOrderList": [{ |
||||||
|
"goodsType": 7, |
||||||
|
"goodsId": this.couponId, |
||||||
|
"saleCount": 1, |
||||||
|
"storeId": this.storeId |
||||||
|
}] |
||||||
|
} |
||||||
|
addOrder(goods).then(res => { |
||||||
|
if (res.return_code == '000000') { |
||||||
|
uni.hideLoading(); |
||||||
|
this.jumpType = res.return_data.highChildOrderList[0].ext1; |
||||||
|
this.orderId = res.return_data.id; |
||||||
|
this.orderToPay(res.return_data); |
||||||
|
} else { |
||||||
|
uni.hideLoading(); |
||||||
|
uni.showToast({ |
||||||
|
title: res.return_msg, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}); |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
//获取选择支付方式 |
||||||
|
changeRiado() { |
||||||
|
if (!this.user.isSetHltCard) { |
||||||
|
uni.showToast({ |
||||||
|
icon: 'none', |
||||||
|
title: '当前账号还未绑定,前往绑定', |
||||||
|
duration: 2000, |
||||||
|
success() { |
||||||
|
setTimeout(() => { |
||||||
|
uni.navigateTo({ |
||||||
|
url:'../../pages/user/bindingCard/bindingCard' |
||||||
|
}) |
||||||
|
}, 1000) |
||||||
|
} |
||||||
|
}); |
||||||
|
return; |
||||||
|
} |
||||||
|
}, |
||||||
|
//获取订单数据 |
||||||
|
orderToPay(item) { |
||||||
|
let that = this; |
||||||
|
if (that.paytype == 'weixin') { |
||||||
|
// #ifdef H5 |
||||||
|
let params = { |
||||||
|
"orderId": item.id, |
||||||
|
"openId": app.globalData.openId, |
||||||
|
"orderScene": "GOODS_ORDER", |
||||||
|
"openIdType": 2 |
||||||
|
} |
||||||
|
// #endif |
||||||
|
// #ifdef MP |
||||||
|
let params = { |
||||||
|
"orderId": item.id, |
||||||
|
"openId": app.globalData.openId, |
||||||
|
"orderScene": "GOODS_ORDER" |
||||||
|
} |
||||||
|
// #endif |
||||||
|
orderToPay(params).then(res => { |
||||||
|
if (res.return_code == '000000') { |
||||||
|
// #ifdef MP |
||||||
|
uni.showLoading({ |
||||||
|
title: '支付中...' |
||||||
|
}) |
||||||
|
uni.requestPayment({ |
||||||
|
"appId": res.return_data.appId, |
||||||
|
"nonceStr": res.return_data.nonceStr, |
||||||
|
"package": res.return_data.package, |
||||||
|
"paySign": res.return_data.sign, |
||||||
|
"signType": "MD5", |
||||||
|
"timeStamp": res.return_data.timeStamp, |
||||||
|
success: function(res) { |
||||||
|
uni.hideLoading(); |
||||||
|
uni.showToast({ |
||||||
|
title: '支付成功' |
||||||
|
}) |
||||||
|
app.globalData.storeid = ''; |
||||||
|
app.globalData.storename = ''; |
||||||
|
uni.reLaunch({ |
||||||
|
url:'../coupon-comfirmation-success/coupon-comfirmation-success' |
||||||
|
}); |
||||||
|
}, |
||||||
|
fail: function(err) { |
||||||
|
uni.hideLoading(); |
||||||
|
uni.navigateBack({}) |
||||||
|
}, |
||||||
|
}); |
||||||
|
// #endif |
||||||
|
|
||||||
|
//判断是否是公众号 |
||||||
|
// #ifdef H5 |
||||||
|
//判断微信浏览器 |
||||||
|
that.payRequest(res); |
||||||
|
// #endif |
||||||
|
|
||||||
|
} else { |
||||||
|
uni.showToast({ |
||||||
|
title: res.return_msg, |
||||||
|
icon: 'none' |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
} else if (that.paytype == 'jinbi') { |
||||||
|
if (that.user.gold < that.paytheprice * 100) { |
||||||
|
uni.showToast({ |
||||||
|
icon: 'none', |
||||||
|
title: '积分不足', |
||||||
|
duration: 2000, |
||||||
|
success() { |
||||||
|
setTimeout(() => { |
||||||
|
uni.navigateTo({ |
||||||
|
url:'../../pages/user/deposit/deposit' |
||||||
|
}) |
||||||
|
}, 1000) |
||||||
|
} |
||||||
|
}); |
||||||
|
return; |
||||||
|
} |
||||||
|
if (!that.user.isSetPayPwd) { |
||||||
|
uni.navigateTo({ |
||||||
|
url:'../../pages/login/updatePas/updatePas' |
||||||
|
}) |
||||||
|
return; |
||||||
|
} |
||||||
|
that.$refs.paymentPassword.modalFun('show'); |
||||||
|
} else if (that.paytype == 'gonghuika') { |
||||||
|
if (that.tongCardPrice < that.paytheprice) { |
||||||
|
uni.showToast({ |
||||||
|
icon: 'none', |
||||||
|
title: '工会卡余额不足', |
||||||
|
duration: 2000, |
||||||
|
}); |
||||||
|
return; |
||||||
|
} |
||||||
|
if (!that.user.isSetPayPwd) { |
||||||
|
uni.navigateTo({ |
||||||
|
url:'../../pages/login/updatePas/updatePas' |
||||||
|
}) |
||||||
|
return; |
||||||
|
} |
||||||
|
if (!that.user.isSetHltCard) { |
||||||
|
uni.showToast({ |
||||||
|
icon: 'none', |
||||||
|
title: '当前账号还未绑定,前往绑定', |
||||||
|
duration: 2000, |
||||||
|
success() { |
||||||
|
setTimeout(() => { |
||||||
|
uni.navigateTo({ |
||||||
|
url:'../../pages/user/bindingCard/bindingCard' |
||||||
|
}) |
||||||
|
}, 1000) |
||||||
|
} |
||||||
|
}); |
||||||
|
return; |
||||||
|
} |
||||||
|
that.$refs.paymentPassword.modalFun('show'); |
||||||
|
} else { |
||||||
|
uni.showToast({ |
||||||
|
title: '请选择支付方式', |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
submitHandle(e) { |
||||||
|
this.PaymentPassword = e.value; |
||||||
|
if (this.PaymentPassword == '') { |
||||||
|
uni.showToast({ |
||||||
|
title: '请勿手动关闭弹窗', |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
return; |
||||||
|
} |
||||||
|
uni.showLoading({ |
||||||
|
title: '支付中...' |
||||||
|
}) |
||||||
|
if (this.paytype == 'jinbi') { |
||||||
|
let params = { |
||||||
|
"orderId": this.orderId, |
||||||
|
"password": this.PaymentPassword |
||||||
|
} |
||||||
|
orderToGoldPay(params).then(res => { |
||||||
|
uni.hideLoading(); |
||||||
|
if (res.return_code == '000000') { |
||||||
|
uni.showToast({ |
||||||
|
title: '支付成功' |
||||||
|
}) |
||||||
|
uni.reLaunch({ |
||||||
|
url:'../coupon-comfirmation-success/coupon-comfirmation-success' |
||||||
|
}); |
||||||
|
return; |
||||||
|
} |
||||||
|
if (res.return_code == '102130') { |
||||||
|
uni.navigateTo({ |
||||||
|
url:'../../pages/login/updatePas/updatePas' |
||||||
|
}) |
||||||
|
return; |
||||||
|
} |
||||||
|
uni.showToast({ |
||||||
|
title: res.return_msg, |
||||||
|
icon: 'none' |
||||||
|
}) |
||||||
|
}) |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
let params = { |
||||||
|
"orderId": this.orderId, |
||||||
|
"cardNo": this.user.hltCardNo.cardNo, |
||||||
|
"password": this.PaymentPassword |
||||||
|
} |
||||||
|
hltUnionCardPay(params).then(res => { |
||||||
|
uni.hideLoading(); |
||||||
|
if (res.return_code == '000000') { |
||||||
|
uni.showToast({ |
||||||
|
title: '支付成功' |
||||||
|
}) |
||||||
|
uni.reLaunch({ |
||||||
|
url:'../coupon-comfirmation-success/coupon-comfirmation-success' |
||||||
|
}); |
||||||
|
return; |
||||||
|
} |
||||||
|
if (res.return_code == '102130') { |
||||||
|
uni.navigateTo({ |
||||||
|
url:'../../pages/login/updatePas/updatePas' |
||||||
|
}) |
||||||
|
return; |
||||||
|
} |
||||||
|
uni.showToast({ |
||||||
|
title: res.return_msg, |
||||||
|
icon: 'none' |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
}, |
||||||
|
payRequest: function(self) { |
||||||
|
uni.showLoading({ |
||||||
|
title: '支付中...' |
||||||
|
}) |
||||||
|
jweixin.config({ |
||||||
|
// debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 |
||||||
|
appId: self.return_data.appId, // 必填,公众号的唯一标识 |
||||||
|
timestamp: self.return_data.timeStamp, // 必填,生成签名的时间戳 |
||||||
|
nonceStr: self.return_data.nonceStr, // 必填,生成签名的随机串 |
||||||
|
signature: self.return_data.sign, // 必填,签名,见附录1 |
||||||
|
jsApiList: ['chooseWXPay'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 |
||||||
|
}); |
||||||
|
uni.hideLoading(); |
||||||
|
jweixin.ready(function() { |
||||||
|
jweixin.checkJsApi({ |
||||||
|
jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表,所有JS接口列表见附录2, |
||||||
|
success: function(res) {}, |
||||||
|
fail: function(res) {} |
||||||
|
}); |
||||||
|
jweixin.chooseWXPay({ |
||||||
|
appId: self.return_data.appId, |
||||||
|
timestamp: self.return_data |
||||||
|
.timeStamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符 |
||||||
|
nonceStr: self.return_data.nonceStr, // 支付签名随机串,不长于 32 位 |
||||||
|
package: self.return_data |
||||||
|
.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=***) |
||||||
|
signType: 'MD5', // 签名方式,默认为'SHA1',使用新版支付需传入'MD5' |
||||||
|
paySign: self.return_data.sign, // 支付签名 |
||||||
|
success: function(res) { |
||||||
|
// 支付成功后的回调函数 |
||||||
|
uni.showToast({ |
||||||
|
title: '支付成功' |
||||||
|
}) |
||||||
|
uni.reLaunch({ |
||||||
|
url:'../coupon-comfirmation-success/coupon-comfirmation-success' |
||||||
|
}); |
||||||
|
}, |
||||||
|
cancel: function(r) {}, |
||||||
|
fail: function(res) {} |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
jweixin.error(function(res) { |
||||||
|
uni.showToast({ |
||||||
|
icon: 'none', |
||||||
|
title: '支付失败了', |
||||||
|
duration: 4000 |
||||||
|
}); |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
page { |
||||||
|
background-color: #f7f7f7; |
||||||
|
} |
||||||
|
|
||||||
|
.comorder { |
||||||
|
background-color: #FFFFFF; |
||||||
|
border-radius: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.jtcs { |
||||||
|
width: 40rpx; |
||||||
|
height: 40rpx; |
||||||
|
margin-top: 30rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.goodsimg { |
||||||
|
align-items: center; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
image { |
||||||
|
width: 170rpx; |
||||||
|
max-height: 170rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.yhprice { |
||||||
|
width: 100%; |
||||||
|
height: 25px; |
||||||
|
text-align: right; |
||||||
|
margin-top: -20px; |
||||||
|
} |
||||||
|
|
||||||
|
.price-number { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: flex-end; |
||||||
|
font-size: 28upx; |
||||||
|
height: 40upx; |
||||||
|
|
||||||
|
.price { |
||||||
|
color: #FE4545; |
||||||
|
display: flex; |
||||||
|
max-width: 50%; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.number { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
width: 50%; |
||||||
|
text-decoration: line-through; |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.yhqky { |
||||||
|
background: #ff0034; |
||||||
|
color: #ffffff; |
||||||
|
font-size: 14px; |
||||||
|
padding-left: 5px; |
||||||
|
padding-right: 5px; |
||||||
|
margin-left: 8px; |
||||||
|
padding-top: 2px; |
||||||
|
padding-bottom: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.addr { |
||||||
|
width: 86%; |
||||||
|
padding: 20upx 3%; |
||||||
|
margin: 30upx auto 20upx auto; |
||||||
|
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 20upx; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
.icon { |
||||||
|
width: 80upx; |
||||||
|
height: 80upx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
image { |
||||||
|
width: 60upx; |
||||||
|
height: 60upx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tel-name { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
font-size: 32upx; |
||||||
|
|
||||||
|
.tel { |
||||||
|
margin-left: 40upx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.addres { |
||||||
|
width: 100%; |
||||||
|
font-size: 26upx; |
||||||
|
color: #999; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tccs { |
||||||
|
box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, 0.2); |
||||||
|
border: 1px solid #f6f6f6; |
||||||
|
border-radius: 8px; |
||||||
|
align-items: center; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
image { |
||||||
|
width: 170rpx; |
||||||
|
max-height: 170rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tcrig { |
||||||
|
margin-left: 20rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.info { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: flex-end; |
||||||
|
width: 92%; |
||||||
|
} |
||||||
|
|
||||||
|
.order { |
||||||
|
width: 86%; |
||||||
|
padding: 10upx 3%; |
||||||
|
margin: 30upx auto 20upx auto; |
||||||
|
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 20upx; |
||||||
|
|
||||||
|
.row { |
||||||
|
margin: 20upx 0; |
||||||
|
height: 40upx; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
.left { |
||||||
|
font-size: 28upx; |
||||||
|
} |
||||||
|
|
||||||
|
.right { |
||||||
|
margin-left: 40upx; |
||||||
|
font-size: 26upx; |
||||||
|
color: #999; |
||||||
|
|
||||||
|
input { |
||||||
|
font-size: 26upx; |
||||||
|
color: #999; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.footer { |
||||||
|
width: 92%; |
||||||
|
padding: 0 4%; |
||||||
|
background-color: #fbfbfb; |
||||||
|
height: 100upx; |
||||||
|
display: flex; |
||||||
|
justify-content: flex-end; |
||||||
|
align-items: center; |
||||||
|
font-size: 28upx; |
||||||
|
position: fixed; |
||||||
|
bottom: 0upx; |
||||||
|
z-index: 5; |
||||||
|
|
||||||
|
.settlement { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: flex-end; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.sum { |
||||||
|
width: 50%; |
||||||
|
font-size: 18px; |
||||||
|
margin-right: 10upx; |
||||||
|
display: flex; |
||||||
|
justify-content: flex-start; |
||||||
|
|
||||||
|
.money { |
||||||
|
color: #eb5823; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.btn { |
||||||
|
padding: 0 50rpx; |
||||||
|
height: 80rpx; |
||||||
|
background-color: #0083f5; |
||||||
|
color: #fff; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
font-size: 30upx; |
||||||
|
border-radius: 40upx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.goods-list { |
||||||
|
width: 100%; |
||||||
|
padding: 0; |
||||||
|
|
||||||
|
.tis { |
||||||
|
width: 100%; |
||||||
|
height: 60upx; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
font-size: 32upx; |
||||||
|
} |
||||||
|
|
||||||
|
.row { |
||||||
|
width: calc(92%); |
||||||
|
height: calc(22vw + 40upx); |
||||||
|
margin: 20upx auto; |
||||||
|
|
||||||
|
border-radius: 15upx; |
||||||
|
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1); |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
z-index: 4; |
||||||
|
border: 0; |
||||||
|
|
||||||
|
.menu { |
||||||
|
.icon { |
||||||
|
color: #fff; |
||||||
|
// font-size: 25upx; |
||||||
|
} |
||||||
|
|
||||||
|
position: absolute; |
||||||
|
width: 30%; |
||||||
|
height: 100%; |
||||||
|
right: 0; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
background-color: red; |
||||||
|
color: #fff; |
||||||
|
z-index: 2; |
||||||
|
} |
||||||
|
|
||||||
|
.carrier { |
||||||
|
.checkbox-box { |
||||||
|
padding-left: 20upx; |
||||||
|
flex-shrink: 0; |
||||||
|
height: 22vw; |
||||||
|
margin-right: 20upx; |
||||||
|
} |
||||||
|
|
||||||
|
position: absolute; |
||||||
|
width: 94%; |
||||||
|
margin-left: 3%; |
||||||
|
padding: 0 0; |
||||||
|
height: 100%; |
||||||
|
z-index: 3; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.goods-info { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
padding-right: 20upx; |
||||||
|
|
||||||
|
.img { |
||||||
|
width: 22vw; |
||||||
|
height: 22vw; |
||||||
|
border-radius: 10upx; |
||||||
|
overflow: hidden; |
||||||
|
flex-shrink: 0; |
||||||
|
margin-right: 10upx; |
||||||
|
|
||||||
|
image { |
||||||
|
width: 22vw; |
||||||
|
height: 22vw; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.info { |
||||||
|
width: 100%; |
||||||
|
height: 22vw; |
||||||
|
overflow: hidden; |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.title { |
||||||
|
width: 100%; |
||||||
|
font-size: 16px; |
||||||
|
display: -webkit-box; |
||||||
|
-webkit-box-orient: vertical; |
||||||
|
-webkit-line-clamp: 2; |
||||||
|
// text-align: justify; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.spec { |
||||||
|
font-size: 14px; |
||||||
|
color: #a7a7a7; |
||||||
|
height: 30upx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
padding: 0; |
||||||
|
border-radius: 15upx; |
||||||
|
margin-bottom: 20vw; |
||||||
|
} |
||||||
|
|
||||||
|
.price-number { |
||||||
|
position: absolute; |
||||||
|
width: 100%; |
||||||
|
bottom: 0upx; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: flex-end; |
||||||
|
font-size: 28upx; |
||||||
|
height: 60upx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,280 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
<view class="input-box"> |
||||||
|
<view class="icon search"></view> |
||||||
|
<input placeholder="搜索商品" v-model="couponName" placeholder-style="color:#c0c0c0;" @input="toSearch()" /> |
||||||
|
</view> |
||||||
|
<view class="swiper"> |
||||||
|
<view class="swiper-box"> |
||||||
|
<swiper circular="true" autoplay="true" @change="swiperChange"> |
||||||
|
<swiper-item v-for="swiper in swiperList" :key="swiper.id"> |
||||||
|
<image :src="imageUrl+swiper.imgData"></image> |
||||||
|
</swiper-item> |
||||||
|
</swiper> |
||||||
|
<view class="indicator"> |
||||||
|
<view class="dots" v-for="(swiper, index) in swiperList" |
||||||
|
:class="[currentSwiper >= index ? 'on' : '']" :key="index"></view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view v-if="goodsList == '' " class="mart60 fotct font14 fcor666"> |
||||||
|
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image> |
||||||
|
</view> |
||||||
|
<view class="width90 height110 mart5" v-for="(row, index) in goodsList" :key="index" @click="toGoods(row.id)"> |
||||||
|
<image class="goodsimg flleft mart5" mode="widthFix" :src="imageUrl+row.listImg"></image> |
||||||
|
<view class="goodsli "> |
||||||
|
<view class="text2 fcor333 font14 fontwig6">{{row.title}}</view> |
||||||
|
<view class="goodsxg font12 fotct">限购{{row.purchaseNum}}件</view> |
||||||
|
|
||||||
|
<view class="info mart10"> |
||||||
|
<view class="price"> |
||||||
|
¥ {{row.price}} |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { |
||||||
|
getDiscountPackageList, |
||||||
|
getCmsContent, |
||||||
|
} from '../../Utils/Api.js'; |
||||||
|
let app = getApp(); |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
goodsList: [], |
||||||
|
imagewxUrl: app.globalData.imageWxImg, |
||||||
|
imgadres: 'noorder.png', |
||||||
|
imageUrl: app.globalData.imgUrl, |
||||||
|
// 轮播图片 |
||||||
|
swiperList: [{ |
||||||
|
id: 1, |
||||||
|
src: 'url1', |
||||||
|
img: 'banner2.png' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
src: 'url2', |
||||||
|
img: 'banner3.png' |
||||||
|
} |
||||||
|
], |
||||||
|
currentSwiper: 0, |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 10, |
||||||
|
isNoMoreData: false, |
||||||
|
typeId: '', |
||||||
|
couponName: '', |
||||||
|
brandid: '', |
||||||
|
goodtyid: '' |
||||||
|
}; |
||||||
|
}, |
||||||
|
|
||||||
|
onLoad: function() { //option为object类型,会序列化上个页面传递的参数 |
||||||
|
uni.setNavigationBarTitle({ |
||||||
|
title: '优惠券包列表' |
||||||
|
}); |
||||||
|
this.getDiscountPackageList(); |
||||||
|
this.getCmsContent('CMS_DISCOUNT_BANNER'); |
||||||
|
}, |
||||||
|
onPageScroll(e) { |
||||||
|
|
||||||
|
}, |
||||||
|
//上拉加载,需要自己在page.json文件中配置"onReachBottomDistance" |
||||||
|
onReachBottom() { |
||||||
|
this.getDiscountPackageList(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
//获取弹出或者弹窗 |
||||||
|
getCmsContent(item) { |
||||||
|
let params = { |
||||||
|
regionId: app.globalData.cityId, |
||||||
|
categoryCode: item |
||||||
|
} |
||||||
|
getCmsContent(params).then(res => { |
||||||
|
if (res.return_code == '000000') { |
||||||
|
this.swiperList = res.return_data; |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
//轮播图指示器 |
||||||
|
swiperChange(event) { |
||||||
|
this.currentSwiper = event.detail.current; |
||||||
|
}, |
||||||
|
//优惠券包列表 |
||||||
|
getDiscountPackageList() { |
||||||
|
uni.showLoading({ |
||||||
|
title: '加载中...' |
||||||
|
}) |
||||||
|
if (this.isNoMoreData) { |
||||||
|
uni.hideLoading() |
||||||
|
return false; |
||||||
|
} |
||||||
|
let pagenum = this.pageNum; |
||||||
|
let params = { |
||||||
|
regionId: app.globalData.cityId, |
||||||
|
pageNum: pagenum, |
||||||
|
pageSize: this.pageSize, |
||||||
|
title: this.couponName |
||||||
|
} |
||||||
|
getDiscountPackageList(params).then(res => { |
||||||
|
if (res.return_code == '000000') { |
||||||
|
uni.hideLoading(); |
||||||
|
this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true; |
||||||
|
this.goodsList = this.goodsList.concat(res.return_data.list); |
||||||
|
if (res.return_data.total == (this.pageNum * this.pageSize)) { |
||||||
|
this.isNoMoreData = true; |
||||||
|
} |
||||||
|
this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum; |
||||||
|
} else { |
||||||
|
this.goodsList = []; |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
toSearch() { |
||||||
|
this.pageNum = 1; |
||||||
|
this.pageSize = 10; |
||||||
|
this.isNoMoreData = false; |
||||||
|
this.goodsList = []; |
||||||
|
this.getDiscountPackageList(); |
||||||
|
}, |
||||||
|
//商品跳转 |
||||||
|
toGoods(e) { |
||||||
|
uni.navigateTo({ |
||||||
|
url: '../coupon-packge-details/coupon-packge-details?id=' + e |
||||||
|
}); |
||||||
|
}, |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.input-box { |
||||||
|
width: 90%; |
||||||
|
margin-left: 5%; |
||||||
|
margin-top: 15px; |
||||||
|
height: 70rpx; |
||||||
|
background-color: #f5f5f5; |
||||||
|
border-radius: 10rpx; |
||||||
|
position: relative; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.icon { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
position: absolute; |
||||||
|
top: 2px; |
||||||
|
left: 5px; |
||||||
|
width: 60upx; |
||||||
|
height: 60upx; |
||||||
|
font-size: 34upx; |
||||||
|
color: #c0c0c0; |
||||||
|
} |
||||||
|
|
||||||
|
input { |
||||||
|
padding-left: 50upx; |
||||||
|
height: 28upx; |
||||||
|
font-size: 28upx; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.swiper { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
margin-top: 20px; |
||||||
|
margin-bottom: 20px; |
||||||
|
|
||||||
|
.swiper-box { |
||||||
|
width: 92%; |
||||||
|
height: 150px; |
||||||
|
overflow: hidden; |
||||||
|
border-radius: 15upx; |
||||||
|
box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2); |
||||||
|
//兼容ios,微信小程序 |
||||||
|
position: relative; |
||||||
|
z-index: 1; |
||||||
|
|
||||||
|
swiper { |
||||||
|
width: 100%; |
||||||
|
height: 150px; |
||||||
|
|
||||||
|
swiper-item { |
||||||
|
image { |
||||||
|
width: 100%; |
||||||
|
height: 150px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.indicator { |
||||||
|
position: absolute; |
||||||
|
bottom: 20upx; |
||||||
|
left: 20upx; |
||||||
|
background-color: rgba(255, 255, 255, 0.4); |
||||||
|
width: 150upx; |
||||||
|
height: 5upx; |
||||||
|
border-radius: 3upx; |
||||||
|
overflow: hidden; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
.dots { |
||||||
|
width: 0upx; |
||||||
|
background-color: rgba(255, 255, 255, 1); |
||||||
|
transition: all 0.3s ease-out; |
||||||
|
|
||||||
|
&.on { |
||||||
|
width: (100%/3); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.goodsimg { |
||||||
|
width: 90px; |
||||||
|
height: 90px; |
||||||
|
} |
||||||
|
|
||||||
|
.goodsli { |
||||||
|
margin-left: 100px; |
||||||
|
padding-top: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.goodsxg { |
||||||
|
margin-top: 5px; |
||||||
|
border: 1px solid #eb5823; |
||||||
|
border-radius: 5px; |
||||||
|
color: #eb5823; |
||||||
|
width: 55px; |
||||||
|
padding: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
.info { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: flex-end; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
.price { |
||||||
|
color: #e65339; |
||||||
|
font-size: 30upx; |
||||||
|
font-weight: 600; |
||||||
|
width: 50%; |
||||||
|
} |
||||||
|
|
||||||
|
.slogan { |
||||||
|
width: 50%; |
||||||
|
color: #807c87; |
||||||
|
font-size: 24upx; |
||||||
|
text-decoration: line-through; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,988 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
<!-- #ifdef H5 --> |
||||||
|
<view class="header"> |
||||||
|
<!-- 头部-默认显示 --> |
||||||
|
<view class="before" :style="{ opacity: 1 - afterHeaderOpacity, zIndex: beforeHeaderzIndex }"> |
||||||
|
<view class="back"> |
||||||
|
<view class="icon xiangqian" @tap="back" v-if="showBack"></view> |
||||||
|
</view> |
||||||
|
<view class="middle"></view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<!-- #endif --> |
||||||
|
<!-- 底部菜单 --> |
||||||
|
<view class="footer"> |
||||||
|
<button class="width100 fotct btnfot" @click="buy"> |
||||||
|
立即兑换 |
||||||
|
</button> |
||||||
|
</view> |
||||||
|
<!-- 商品主图轮播 --> |
||||||
|
<view class="swiper-box"> |
||||||
|
<swiper circular="true" autoplay="true" @change="swiperChange"> |
||||||
|
<swiper-item v-for="(swiper,index) in swiperList" :key="index"> |
||||||
|
<image mode="widthFix" :src="imageUrl+swiper" @click="perImage(swiper)"></image> |
||||||
|
</swiper-item> |
||||||
|
</swiper> |
||||||
|
<view class="indicator">{{currentSwiper+1}}/{{swiperList.length}}</view> |
||||||
|
</view> |
||||||
|
<view class="width100 height60 backcorlr"> |
||||||
|
<view class="flleft width70 fcorfff"> |
||||||
|
<view class="font13 mart15 margle20">¥<text |
||||||
|
class="font20 paddleft5">{{goodsData.packageDetail.price}}</text></view> |
||||||
|
</view> |
||||||
|
<view class="flright width30"> |
||||||
|
<view class="xgnum">限购{{goodsData.packageDetail.purchaseNum}}件</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<!-- 标题 价格 --> |
||||||
|
<view class="info-box goods-info"> |
||||||
|
<view class="font16 fcor333 fontwig6"> |
||||||
|
{{goodsData.packageDetail.title}} |
||||||
|
</view> |
||||||
|
<view class="mart10 width100 font14 fcor999 height20"> |
||||||
|
<view class="width70 flleft">库存:{{goodsData.packageDetail.totalStock}}件</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<!-- 服务-规则选择 --> |
||||||
|
<view class="height60 width100 backcorfff" @click="showPopup()"> |
||||||
|
<view class="width80p flleft" style="padding-left: 4%;line-height: 60px; "> |
||||||
|
优惠券包 |
||||||
|
</view> |
||||||
|
<view class="width15 flright fotct"> |
||||||
|
<image class="jtcs" src="../../static/img/jt.png"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<!-- 详情 --> |
||||||
|
<view class="description"> |
||||||
|
<view class="title">———— 商品详情 ————</view> |
||||||
|
<view class="content marb65"> |
||||||
|
<image mode="widthFix" class="width100" v-for="codes in couponDesc" :key="codes" :src="imageUrl+codes" |
||||||
|
@click="perImage(codes)"> |
||||||
|
</image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<wybPopup ref="popup" type="bottom" width="500" scrollY="true" radius="6" :showCloseIcon="true"> |
||||||
|
<view class="fotct font18 fontwig6 fcor333 mart10 height30">优惠券包</view> |
||||||
|
<view class="width92 height110 tccs mart10" v-for="product in goodsData.discountList" :key="product.id"> |
||||||
|
<image mode="widthFix" class="flleft" src="../../static/img/logo.png"></image> |
||||||
|
<view class="tcrig"> |
||||||
|
<view class="font16 fontwig6 fcor333 text2">{{ product.discountDetail.discountName}}</view> |
||||||
|
<view class="font14 fcor999 mart5">数量: x{{product.num}}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</wybPopup> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { |
||||||
|
getDiscountPackageDetail |
||||||
|
} from '../../Utils/Api.js'; |
||||||
|
import wybPopup from '../../components/wyb-popup/wyb-popup.vue'; |
||||||
|
let app = getApp() |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
wybPopup |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
//控制渐变标题栏的参数 |
||||||
|
beforeHeaderzIndex: 11, //层级 |
||||||
|
afterHeaderOpacity: 0, //不透明度 |
||||||
|
//是否显示返回按钮 |
||||||
|
// #ifndef MP |
||||||
|
showBack: true, |
||||||
|
// #endif |
||||||
|
//轮播主图数据 |
||||||
|
swiperList: [], |
||||||
|
couponDesc: [], |
||||||
|
//轮播图下标 |
||||||
|
currentSwiper: 0, |
||||||
|
// 商品信息 |
||||||
|
goodsData: "", |
||||||
|
//商品描述html |
||||||
|
desid: '', |
||||||
|
imageUrl: app.globalData.imgUrl, |
||||||
|
|
||||||
|
}; |
||||||
|
}, |
||||||
|
filters: { |
||||||
|
//过滤器 用于格式化时间 |
||||||
|
formatDate: function(value, spe = '/') { |
||||||
|
let data = new Date(value); |
||||||
|
let year = data.getFullYear(); |
||||||
|
let month = data.getMonth() + 1; |
||||||
|
let day = data.getDate(); |
||||||
|
let h = data.getHours(); |
||||||
|
let mm = data.getMinutes(); |
||||||
|
let s = data.getSeconds(); |
||||||
|
month = month >= 10 ? month : "0" + month; |
||||||
|
day = day >= 10 ? day : "0" + day; |
||||||
|
h = h >= 10 ? h : "0" + h; |
||||||
|
mm = mm >= 10 ? mm : "0" + mm; |
||||||
|
s = s >= 10 ? s : "0" + s; |
||||||
|
return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`; |
||||||
|
} |
||||||
|
}, |
||||||
|
onLoad(option) { |
||||||
|
this.desid = option.id; |
||||||
|
this.getDiscountPackageDetail(); |
||||||
|
// #ifdef MP |
||||||
|
//小程序隐藏返回按钮 |
||||||
|
this.showBack = false; |
||||||
|
// #endif |
||||||
|
//option为object类型,会序列化上个页面传递的参数 |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
//优惠券包详情 |
||||||
|
getDiscountPackageDetail() { |
||||||
|
uni.showLoading({ |
||||||
|
title: '加载中...' |
||||||
|
}) |
||||||
|
let params = { |
||||||
|
packageId: this.desid |
||||||
|
} |
||||||
|
getDiscountPackageDetail(params).then(res => { |
||||||
|
if (res.return_code == '000000') { |
||||||
|
this.goodsData = res.return_data; |
||||||
|
this.swiperList = res.return_data.packageDetail.bannerImg.split(','); |
||||||
|
this.couponDesc = res.return_data.packageDetail.detailsImg.split(','); |
||||||
|
uni.hideLoading() |
||||||
|
} else { |
||||||
|
uni.hideLoading() |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
//显示弹出 |
||||||
|
showPopup() { |
||||||
|
this.$refs.popup.show(); |
||||||
|
}, |
||||||
|
//查看大图 |
||||||
|
perImage(item) { |
||||||
|
uni.previewImage({ |
||||||
|
current: 0, //预览图片的下标 |
||||||
|
urls: [this.imageUrl + item] //预览图片的地址,必须要数组形式,如果不是数组形式就转换成数组形式就可以 |
||||||
|
}) |
||||||
|
}, |
||||||
|
//轮播图指示器 |
||||||
|
swiperChange(event) { |
||||||
|
this.currentSwiper = event.detail.current; |
||||||
|
}, |
||||||
|
buy() { |
||||||
|
let that = this; |
||||||
|
if (that.goodsData.totalStock == 0) { |
||||||
|
uni.showToast({ |
||||||
|
title: '库存不足', |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
return; |
||||||
|
} |
||||||
|
uni.showToast({ |
||||||
|
title: '提交订单...', |
||||||
|
icon: 'none', |
||||||
|
duration: 2000, |
||||||
|
success() { |
||||||
|
uni.navigateTo({ |
||||||
|
url: '../coupon-comfirmation/coupon-comfirmation?id=' + that.desid |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
//返回上一页 |
||||||
|
back() { |
||||||
|
uni.navigateBack(); |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
page { |
||||||
|
background-color: #f8f8f8; |
||||||
|
} |
||||||
|
|
||||||
|
button::after { |
||||||
|
border: none |
||||||
|
} |
||||||
|
|
||||||
|
.jtcs { |
||||||
|
width: 40rpx; |
||||||
|
height: 40rpx; |
||||||
|
margin-top: 40rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.tccs { |
||||||
|
box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, 0.2); |
||||||
|
border: 1px solid #f6f6f6; |
||||||
|
border-radius: 8px; |
||||||
|
align-items: center; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
image { |
||||||
|
width: 170rpx; |
||||||
|
max-height: 170rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tcrig { |
||||||
|
margin-left: 20rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.info { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: flex-end; |
||||||
|
width: 92%; |
||||||
|
|
||||||
|
.price { |
||||||
|
color: #e65339; |
||||||
|
font-size: 15px; |
||||||
|
font-weight: 600; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.slogan { |
||||||
|
color: #807c87; |
||||||
|
font-size: 24upx; |
||||||
|
text-decoration: line-through; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.xgnum { |
||||||
|
background-color: #FFFFFF; |
||||||
|
color: #ff722e; |
||||||
|
height: 30px; |
||||||
|
line-height: 30px; |
||||||
|
font-size: 13px; |
||||||
|
width: 60%; |
||||||
|
padding-left: 5%; |
||||||
|
padding-right: 5%; |
||||||
|
border-radius: 15px; |
||||||
|
margin-top: 15px; |
||||||
|
text-align: center; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes showPopup { |
||||||
|
0% { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
100% { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes hidePopup { |
||||||
|
0% { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
100% { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes showLayer { |
||||||
|
0% { |
||||||
|
transform: translateY(0); |
||||||
|
} |
||||||
|
|
||||||
|
100% { |
||||||
|
transform: translateY(-100%); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes hideLayer { |
||||||
|
0% { |
||||||
|
transform: translateY(-100%); |
||||||
|
} |
||||||
|
|
||||||
|
100% { |
||||||
|
transform: translateY(0); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.icon { |
||||||
|
font-size: 26upx; |
||||||
|
} |
||||||
|
|
||||||
|
.status { |
||||||
|
width: 100%; |
||||||
|
height: 0; |
||||||
|
position: fixed; |
||||||
|
z-index: 10; |
||||||
|
top: 0; |
||||||
|
/* #ifdef APP-PLUS */ |
||||||
|
height: var(--status-bar-height); //覆盖样式 |
||||||
|
/* #endif */ |
||||||
|
background-color: #f1f1f1; |
||||||
|
transition: opacity 0.05s linear; |
||||||
|
} |
||||||
|
|
||||||
|
.header { |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
height: 100upx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
z-index: 10; |
||||||
|
/* #ifdef APP-PLUS */ |
||||||
|
top: var(--status-bar-height); |
||||||
|
|
||||||
|
/* #endif */ |
||||||
|
.before, |
||||||
|
.after { |
||||||
|
width: 92%; |
||||||
|
padding: 0 4%; |
||||||
|
height: 100upx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
/* #ifdef APP-PLUS */ |
||||||
|
top: var(--status-bar-height); |
||||||
|
/* #endif */ |
||||||
|
transition: opacity 0.05s linear; |
||||||
|
|
||||||
|
.back { |
||||||
|
width: 125upx; |
||||||
|
height: 60upx; |
||||||
|
flex-shrink: 0; |
||||||
|
|
||||||
|
.icon { |
||||||
|
margin-left: -10%; |
||||||
|
width: 60upx; |
||||||
|
height: 60upx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
font-size: 42upx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.middle { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-btn { |
||||||
|
width: 125upx; |
||||||
|
height: 60upx; |
||||||
|
flex-shrink: 0; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
.icon { |
||||||
|
&:first-child { |
||||||
|
margin-right: 5upx; |
||||||
|
} |
||||||
|
|
||||||
|
width: 60upx; |
||||||
|
height: 60upx; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
font-size: 42upx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.before { |
||||||
|
.back { |
||||||
|
.icon { |
||||||
|
color: #fff; |
||||||
|
background-color: rgba(0, 0, 0, 0.2); |
||||||
|
border-radius: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.icon-btn { |
||||||
|
.icon { |
||||||
|
color: #fff; |
||||||
|
background-color: rgba(0, 0, 0, 0.2); |
||||||
|
border-radius: 100%; |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.after { |
||||||
|
background-color: #f1f1f1; |
||||||
|
|
||||||
|
.back { |
||||||
|
.icon { |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.icon-btn { |
||||||
|
.icon { |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.middle { |
||||||
|
font-size: 32upx; |
||||||
|
height: 90upx; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
padding: 0 7%; |
||||||
|
|
||||||
|
view { |
||||||
|
width: (100%/3); |
||||||
|
padding: 0 3%; |
||||||
|
margin: 0 3%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
&.on { |
||||||
|
margin-bottom: -4upx; |
||||||
|
color: #f47952; |
||||||
|
border-bottom: solid 4upx #f47952; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.swiper-box { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
swiper { |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
swiper-item { |
||||||
|
image { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.indicator { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
padding: 0 25upx; |
||||||
|
height: 40upx; |
||||||
|
border-radius: 40upx; |
||||||
|
font-size: 22upx; |
||||||
|
position: absolute; |
||||||
|
bottom: 20upx; |
||||||
|
right: 20upx; |
||||||
|
color: #fff; |
||||||
|
background-color: rgba(0, 0, 0, 0.2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.info-box { |
||||||
|
width: 92%; |
||||||
|
padding: 4%; |
||||||
|
background-color: #fff; |
||||||
|
margin-bottom: 20rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.goods-info { |
||||||
|
.price { |
||||||
|
font-size: 15px; |
||||||
|
font-weight: 600; |
||||||
|
color: #f47925; |
||||||
|
} |
||||||
|
|
||||||
|
.zprice { |
||||||
|
text-decoration: line-through; |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
font-size: 30upx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.spec { |
||||||
|
.row { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin: 5px 0 5px 0; |
||||||
|
|
||||||
|
.text { |
||||||
|
font-size: 24upx; |
||||||
|
color: #a2a2a2; |
||||||
|
margin-right: 20upx; |
||||||
|
} |
||||||
|
|
||||||
|
.content { |
||||||
|
font-size: 28upx; |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
|
||||||
|
.serviceitem { |
||||||
|
margin-right: 10upx; |
||||||
|
} |
||||||
|
|
||||||
|
.sp { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
view { |
||||||
|
background-color: #f6f6f6; |
||||||
|
padding: 5upx 10upx; |
||||||
|
color: #999; |
||||||
|
margin-right: 10upx; |
||||||
|
font-size: 20upx; |
||||||
|
border-radius: 5upx; |
||||||
|
|
||||||
|
&.on { |
||||||
|
border: solid 1upx #f47952; |
||||||
|
padding: 4upx 8upx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.arrow { |
||||||
|
position: absolute; |
||||||
|
right: 4%; |
||||||
|
|
||||||
|
.icon { |
||||||
|
color: #ccc; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.comments { |
||||||
|
.row { |
||||||
|
width: 100%; |
||||||
|
height: 40upx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin: 0 0 30upx 0; |
||||||
|
|
||||||
|
.text { |
||||||
|
font-size: 30upx; |
||||||
|
} |
||||||
|
|
||||||
|
.arrow { |
||||||
|
font-size: 28upx; |
||||||
|
position: absolute; |
||||||
|
right: 4%; |
||||||
|
color: #17e6a1; |
||||||
|
|
||||||
|
.show { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.icon { |
||||||
|
color: #17e6a1; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.comment { |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
.user-info { |
||||||
|
width: 100%; |
||||||
|
height: 40upx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.face { |
||||||
|
width: 40upx; |
||||||
|
height: 40upx; |
||||||
|
margin-right: 8upx; |
||||||
|
|
||||||
|
image { |
||||||
|
width: 40upx; |
||||||
|
height: 40upx; |
||||||
|
border-radius: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.username { |
||||||
|
font-size: 24upx; |
||||||
|
color: #999; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.content { |
||||||
|
margin-top: 10upx; |
||||||
|
font-size: 26upx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.description { |
||||||
|
.title { |
||||||
|
width: 100%; |
||||||
|
height: 80upx; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
font-size: 26upx; |
||||||
|
color: #999; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.footer { |
||||||
|
position: fixed; |
||||||
|
bottom: 0upx; |
||||||
|
width: 100%; |
||||||
|
height: 99upx; |
||||||
|
color: #FFFFFF; |
||||||
|
border-top: solid 1upx #eee; |
||||||
|
background-color: #0083f5; |
||||||
|
z-index: 2; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.btnfot { |
||||||
|
text-align: center; |
||||||
|
padding: 0; |
||||||
|
border-radius: 0; |
||||||
|
height: 48px; |
||||||
|
background-color: #0083f5; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
|
||||||
|
.icons { |
||||||
|
display: flex; |
||||||
|
height: 80upx; |
||||||
|
margin-left: -4%; |
||||||
|
|
||||||
|
.box { |
||||||
|
width: 80upx; |
||||||
|
height: 80upx; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
flex-wrap: wrap; |
||||||
|
|
||||||
|
.icon { |
||||||
|
font-size: 40upx; |
||||||
|
color: #828282; |
||||||
|
} |
||||||
|
|
||||||
|
.text { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
width: 100%; |
||||||
|
font-size: 22upx; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.btn { |
||||||
|
height: 80upx; |
||||||
|
border-radius: 40upx; |
||||||
|
overflow: hidden; |
||||||
|
display: flex; |
||||||
|
margin-right: -2%; |
||||||
|
|
||||||
|
.joinCart, |
||||||
|
.buy { |
||||||
|
height: 80upx; |
||||||
|
padding: 0 40upx; |
||||||
|
color: #fff; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
font-size: 28upx; |
||||||
|
} |
||||||
|
|
||||||
|
.joinCart { |
||||||
|
background-color: #f0b46c; |
||||||
|
} |
||||||
|
|
||||||
|
.buy { |
||||||
|
background-color: #0083f5; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.popup { |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
z-index: 20; |
||||||
|
display: none; |
||||||
|
|
||||||
|
.mask { |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
z-index: 21; |
||||||
|
background-color: rgba(0, 0, 0, 0.6); |
||||||
|
} |
||||||
|
|
||||||
|
.layer { |
||||||
|
position: fixed; |
||||||
|
z-index: 22; |
||||||
|
bottom: -70%; |
||||||
|
width: 92%; |
||||||
|
padding: 0 4%; |
||||||
|
height: 70%; |
||||||
|
border-radius: 20upx 20upx 0 0; |
||||||
|
background-color: #fff; |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
align-content: space-between; |
||||||
|
|
||||||
|
.content { |
||||||
|
width: 100%; |
||||||
|
padding: 20upx 0; |
||||||
|
} |
||||||
|
|
||||||
|
.btn { |
||||||
|
width: 100%; |
||||||
|
height: 100upx; |
||||||
|
|
||||||
|
.button { |
||||||
|
width: 100%; |
||||||
|
height: 80upx; |
||||||
|
border-radius: 40upx; |
||||||
|
color: #fff; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
background-color: #f47952; |
||||||
|
font-size: 28upx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.show { |
||||||
|
display: block; |
||||||
|
|
||||||
|
.mask { |
||||||
|
animation: showPopup 0.2s linear both; |
||||||
|
} |
||||||
|
|
||||||
|
.layer { |
||||||
|
animation: showLayer 0.2s linear both; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.hide { |
||||||
|
display: block; |
||||||
|
|
||||||
|
.mask { |
||||||
|
animation: hidePopup 0.2s linear both; |
||||||
|
} |
||||||
|
|
||||||
|
.layer { |
||||||
|
animation: hideLayer 0.2s linear both; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.none { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
&.service { |
||||||
|
.row { |
||||||
|
margin: 30upx 0; |
||||||
|
|
||||||
|
.title { |
||||||
|
font-size: 30upx; |
||||||
|
margin: 10upx 0; |
||||||
|
} |
||||||
|
|
||||||
|
.description { |
||||||
|
font-size: 28upx; |
||||||
|
color: #999; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.spec { |
||||||
|
.title { |
||||||
|
font-size: 30upx; |
||||||
|
margin: 30upx 0; |
||||||
|
} |
||||||
|
|
||||||
|
.sp { |
||||||
|
display: flex; |
||||||
|
|
||||||
|
view { |
||||||
|
font-size: 28upx; |
||||||
|
padding: 5upx 20upx; |
||||||
|
border-radius: 8upx; |
||||||
|
margin: 0 30upx 20upx 0; |
||||||
|
background-color: #f6f6f6; |
||||||
|
|
||||||
|
&.on { |
||||||
|
padding: 3upx 18upx; |
||||||
|
border: solid 1upx #f47925; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.length { |
||||||
|
margin-top: 30upx; |
||||||
|
border-top: solid 1upx #aaa; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
padding-top: 20upx; |
||||||
|
|
||||||
|
.text { |
||||||
|
font-size: 30upx; |
||||||
|
} |
||||||
|
|
||||||
|
.number { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.input { |
||||||
|
width: 80upx; |
||||||
|
height: 60upx; |
||||||
|
margin: 0 10upx; |
||||||
|
background-color: #f3f3f3; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
input { |
||||||
|
width: 80upx; |
||||||
|
height: 60upx; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
text-align: center; |
||||||
|
font-size: 26upx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.sub, |
||||||
|
.add { |
||||||
|
width: 60upx; |
||||||
|
height: 60upx; |
||||||
|
background-color: #f3f3f3; |
||||||
|
border-radius: 5upx; |
||||||
|
|
||||||
|
.icon { |
||||||
|
font-size: 30upx; |
||||||
|
width: 60upx; |
||||||
|
height: 60upx; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.share { |
||||||
|
display: none; |
||||||
|
|
||||||
|
&.show { |
||||||
|
display: block; |
||||||
|
|
||||||
|
.mask { |
||||||
|
animation: showPopup 0.15s linear both; |
||||||
|
} |
||||||
|
|
||||||
|
.layer { |
||||||
|
animation: showLayer 0.15s linear both; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.hide { |
||||||
|
display: block; |
||||||
|
|
||||||
|
.mask { |
||||||
|
animation: hidePopup 0.15s linear both; |
||||||
|
} |
||||||
|
|
||||||
|
.layer { |
||||||
|
animation: hideLayer 0.15s linear both; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.none { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.mask { |
||||||
|
background-color: rgba(0, 0, 0, .5); |
||||||
|
position: fixed; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
top: 0; |
||||||
|
z-index: 11; |
||||||
|
} |
||||||
|
|
||||||
|
.layer { |
||||||
|
width: 92%; |
||||||
|
position: fixed; |
||||||
|
z-index: 12; |
||||||
|
padding: 0 4%; |
||||||
|
top: 100%; |
||||||
|
background-color: rgba(255, 255, 255, 0.9); |
||||||
|
|
||||||
|
.list { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
padding: 10upx 0 30upx 0; |
||||||
|
|
||||||
|
.box { |
||||||
|
width: 25%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
flex-wrap: wrap; |
||||||
|
|
||||||
|
image { |
||||||
|
width: 13.8vw; |
||||||
|
height: 13.8vw; |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
margin-top: 10upx; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
width: 100%; |
||||||
|
font-size: 26upx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.btn { |
||||||
|
width: 100%; |
||||||
|
height: 100upx; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
font-size: 28upx; |
||||||
|
border-top: solid 1upx #666666; |
||||||
|
} |
||||||
|
|
||||||
|
.h1 { |
||||||
|
width: 100%; |
||||||
|
height: 80upx; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
font-size: 34upx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,95 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
<view class="width90 stoCont" v-for="(store,i) in storeList" :key="i"> |
||||||
|
<view class="width80p flleft mart10"> |
||||||
|
<view class="font16 fcor333 fontwig6 text1">{{store.storeName}}</view> |
||||||
|
<view class="font13 fcor666 mart10 text1">{{store.address}}</view> |
||||||
|
</view> |
||||||
|
<view class="width20 flright mart10 fotrt" @click="seeloaction(store)"> |
||||||
|
<image mode="widthFix" style="width: 25px;height: 25px;" :src="imagewxUrl+imgadres1"> |
||||||
|
</image> |
||||||
|
<view class="mart5 fcor999 font13">{{store.distance}}km</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { |
||||||
|
getStoreListByCoupon |
||||||
|
} from '../../Utils/Api.js'; |
||||||
|
let app = getApp(); |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
storeList: [], |
||||||
|
couDesId: '', |
||||||
|
imagewxUrl: app.globalData.imageWxImg, |
||||||
|
imgadres1: 'dhl.png', |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 15, |
||||||
|
isNoMoreData: false |
||||||
|
} |
||||||
|
}, |
||||||
|
onLoad(options) { |
||||||
|
this.couDesId = options.id; |
||||||
|
this.getStoreListByCoupon(); |
||||||
|
}, |
||||||
|
onReachBottom() { |
||||||
|
this.getStoreListByCoupon(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
/** |
||||||
|
* 查询门店列表 |
||||||
|
*/ |
||||||
|
getStoreListByCoupon() { |
||||||
|
uni.showLoading({ |
||||||
|
title: '加载中...' |
||||||
|
}) |
||||||
|
if (this.isNoMoreData) { |
||||||
|
uni.hideLoading() |
||||||
|
return false; |
||||||
|
} |
||||||
|
let pagenum = this.pageNum; |
||||||
|
let params = { |
||||||
|
couponId: this.couDesId, |
||||||
|
longitude: app.globalData.longitude, |
||||||
|
latitude: app.globalData.latitude, |
||||||
|
pageNum: pagenum, |
||||||
|
pageSize: this.pageSize |
||||||
|
} |
||||||
|
getStoreListByCoupon(params).then(res => { |
||||||
|
if (res.return_code == '000000' && res.return_data.list != '') { |
||||||
|
uni.hideLoading(); |
||||||
|
this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true; |
||||||
|
this.storeList = this.storeList.concat(res.return_data.list); |
||||||
|
if (res.return_data.total == (this.pageNum * this.pageSize)) { |
||||||
|
this.isNoMoreData = true; |
||||||
|
} |
||||||
|
this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum; |
||||||
|
} else { |
||||||
|
this.storeList = []; |
||||||
|
uni.hideLoading() |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
//导航 |
||||||
|
seeloaction(e) { |
||||||
|
uni.openLocation({ |
||||||
|
latitude: Number(e.latitude), //目的地的定位 |
||||||
|
longitude: Number(e.longitude), //目的地的定位 |
||||||
|
name: e.storeName, |
||||||
|
address: e.address |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.stoCont { |
||||||
|
border-bottom: 1px solid #f6f6f6; |
||||||
|
height: 140rpx; |
||||||
|
} |
||||||
|
</style> |
After Width: | Height: | Size: 4.1 KiB |
After Width: | Height: | Size: 8.5 KiB |
Loading…
Reference in new issue