zhangjing/ysdH5
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[本时生活h5端]

Browse Source
This commit is contained in:
张慢慢
2023-06-21 17:19:58 +08:00
commit ebb9575bd0
284 changed files with 39689 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

668
pages/oil/buy.vue Normal file
View File

@@ -0,0 +1,668 @@
<template>
<view>
<!-- 按钮 -->
<view class="newrightsBtn" @tap="payment">
<view class="rightsBtn-text">
<view class="rightsBtn-text-num">共：{{ rightData.num }}件商品 </view>
<view>实付：<text>￥{{ rightData.total }}</text></view>
</view>
<button :disabled="disabled">立即购买</button>
</view>
<!-- 卡券 -->
<view style="padding-bottom: 90px">
<view class="cont">
<view class="contBack">
<image class="classBack" src="https://lifetest.ysd-bs.com/storage/materials/2021/08/09/class_back_02.png" mode="scaleToFill"></image>
<view class="classCircle"></view>
<view class="rightsCont">
<scroll-view scroll-x class="welfareCont-top" scroll-with-animation>
<view class="welfareCont-list-img" v-for="(item, index) in rightData.detail.logos" :key="index">
<image :src="item" mode="aspectFill"></image>
</view>
</scroll-view>
<view class="nowrap rightsCont-btn">
{{ rightData.detail.four_title }}
</view>
</view>
</view>
</view>
<!-- 数量 -->
<view class="rightsNumber">
<image class="rightsGoods-img" :src="rightData.detail.goods_cover" mode="aspectFill"></image>
<view class="rightsGoods">
<view class="nowrap rightsGoods-text">
{{ rightData.detail.five_title }}
</view>
<view class="rightsGoods-price">
<view class="rightsGoods-number"><text>￥</text>{{ rightData.detail.price }}</view>
<view class="rightsAdd">
<view class="rightsAdd-btn rightsAdd-remove" :class="{active : rightData.num != 1}" @click="goodsNumber('remove')">-</view>
<input class="rightsAdd-input" :data-num="rightData.num" :value="rightData.num" type="number" disabled=""></input>
<view class="rightsAdd-btn rightsAdd-plus" @click="goodsNumber('plus')">+</view>
</view>
</view>
</view>
</view>
<!-- 收货地址 -->
<block v-if="buyWay.platformCp[buyWay.platIndex]">
<view class="rightsList" v-if="buyWay.platformCp[buyWay.platIndex].name == '快递'">
<block v-if="rightData.detail.type == 'physical'">
<view class="rightsLabel">
<view class="rightsLabel-left">提交方式</view>
<view class="rightsLabel-right rightsLabel-range">
<picker :value="buyWay.platIndex" :range-key="'name'" :range="buyWay.platformCp" range-key="name" @change="platBind">
<view class="tabs-text">
{{ buyWay.platformCp[buyWay.platIndex].name }}
</view>
</picker>
<image class="rightsLabel-row" src="/static/icon/rightsArrow.png"></image>
</view>
</view>
<view class="rightsLabel rightsLabel-address" v-if="buyWay.platformCp[buyWay.platIndex].name == '快递'">
<image class="rightsLabel-icon" src="/static/img/new_rightsAddress.png"></image>
<block v-if="rightData.addressSee != ''">
<view class="rightsLabel-right" @tap="addressTap">
<view class="rightsLabel-address-text">
<view class="rightsLabel-address-name">{{ rightData.addressSee.name }}<view class="rightsLabel-address-tel">{{ rightData.addressSee.mobile }}</view></view>
<text class="nowrap">{{ rightData.addressSee.all_address }}</text>
</view>
<image class="rightsLabel-row" src="/static/icon/rightsArrow.png"></image>
</view>
</block>
<block v-else>
<navigator class="rightsLabel-right" hover-class="none" url="/pages/address_form/address_form?type=Add">
<view class="rightsLabel-address-text" style="line-height: 90rpx;">
添加收货地址
</view>
<image class="rightsLabel-row" src="/static/icon/rightsArrow.png"></image>
</navigator>
</block>
</view>
<view class="rightsLabel" v-if="buyWay.platformCp[buyWay.platIndex].name == '快递'">
<view class="rightsLabel-left">快递运费</view>
<view class="rightsLabel-right rightsLabel-freight">￥{{ rightData.freight }}</view>
</view>
</block>
</view>
</block>
<!-- 购买须知 -->
<view class="notice">
<view class="noticeTitle" @click="noticeTap">
<view class="noticeTitle-flex">
<image class="noticeTitle-img" src="/static/icon/notice_icon.png"></image>
购买前请仔细阅读使用须知、内容介绍
</view>
<image class="noticeTitle-row" :class="{active : notice.noticeShow}" src="/static/icon/rightsArrow.png"></image>
</view>
<view class="noticeText" :class="{active : notice.noticeShow}">
<view class="noticeText-top">购买须知</view>
<view class="noticeText-cont" v-if="notice.remark">
<rich-text :nodes="notice.remark"></rich-text>
</view>
<view class="noticeText-top">内容介绍</view>
<view class="noticeText-cont" v-if="notice.content">
<rich-text :nodes="notice.content"></rich-text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { buy, buySubmit } from '@/apis/interfaces/oil'
export default {
data() {
return {
rightData: {
detail : '', // 权益内容
rightId : '', // 权益id
addressSee : '', // 收货地址
num : 1, // 购买数量
moreAmount : '', // 产品总金额
freight : '', // 运费
total : '' // 总金额
},
notice : {
remark : '', // 购买须知
content : '', // 内容介绍
noticeShow : true // 购买须知状态
},
buyWay : {
platformCp : [], // 选择提交数组
platIndex : 0, // 选择提交方式下标
isdeliver : -1 // 选择提交方式
},
address : {
allAddress : [], // 收货地址列表
addressShow : false // 地址显示状态
},
disabled : false, //购买按钮状态
}
},
// 生命周期函数--监听页面加载
onLoad(options) {
this.rightData.rightId = options.id
// this.code = options.code || ''
},
// 生命周期函数--监听页面显示
onShow() {
// 存储环境-中石油活动
getApp().globalData.envType = 'oilEnv'
// 获取详情
this.rightsInfo();
},
methods: {
// 详情
rightsInfo() {
buy({activity_petro_id: this.rightData.rightId, qty: this.rightData.num}).then(res => {
let obj = res.detail.express
let arr = new Array
arr = Object.keys(obj).map(val=>{
return { ...obj[val], ...{key: val} }
})
if(this.buyWay.isdeliver == -1){
if(res.detail.type == 'physical') {
this.buyWay.isdeliver = res.detail.def_get
}
if(res.detail.type == 'virtual') this.buyWay.isdeliver = 1
}
this.rightData.detail = res.detail
this.rightData.moreAmount = res.amount
this.rightData.total = res.total
this.buyWay.platformCp = arr
this.rightData.freight = res.freight
this.rightData.addressSee = res.address
this.address.allAddress = res.all_address
this.notice.remark = res.detail.remark.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
this.notice.content = res.detail.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
}).catch(err => {
if (!err.login) {
uni.showModal({
title: '用户登录已过期',
content: '请重新登录',
showCancel: false,
success: res => {
if (res.confirm) {
uni.redirectTo({
url: '/pages/oil/signin'
});
}
}
});
}
})
},
// 商品数量加减
goodsNumber(e){
let num = this.rightData.num
if (e == 'plus'){
num ++;
}else{
if (num > 1){
num --;
}else{
uni.showToast({
title : '商品数量不能小于1',
icon : 'none'
})
}
}
this.rightData.num = num
// 获取详情
this.rightsInfo()
},
// 须知展开收起状态
noticeTap() {
this.notice.noticeShow = !this.notice.noticeShow
},
// 收银台跳转
payment() {
if(this.buyWay.isdeliver.length == 0) this.buyWay.isdeliver = this.rightData.detail.def_get
buySubmit({activity_petro_id: this.rightData.rightId, qty: this.rightData.num, is_deliver: this.buyWay.isdeliver}).then(res => {
uni.navigateTo({
url: '/pages/cashier/index?tradeNo=' + res.trade_no + '&type=oil' + "&activity_type=right" + '&price=' + this.rightData.moreAmount
})
}).catch(err => {
uni.showToast({
title : err.message,
icon : 'none'
})
});
}
}
}
</script>
<style lang="scss" scoped>
page {
background-color: #FFFFFF;
}
/* 权益内容 */
.cont {
width: 100%;
overflow: hidden;
.contBack {
position: relative;
width: 200%;
height: 340rpx;
left: -50%;
text-align: center;
background: #000000;
border-radius: 0 0 100% 100%;
overflow: hidden;
.classBack {
position: absolute;
left: 28%;
right: 30%;
width: 44%;
top: 40rpx;
}
}
.classCircle::after,
.contBack::before {
position: absolute;
border-radius: 50%;
content: '';
z-index: 1;
background-color: rgba(255,255,255,.1);
}
.classCircle::after {
left: 20%;
top: -20rpx;
width: 260rpx;
height: 260rpx;
}
.contBack::before {
right: 20%;
top: 55%;
width: 300rpx;
height: 300rpx;
}
.rightsCont {
position: absolute;
z-index: 3;
left: calc(28% - 2rpx);
right: calc(30% - 2rpx);
width: calc(44% + 4rpx);
top: 50rpx;
.welfareCont-top{
white-space: nowrap;
flex-direction: row;
align-items: center;
justify-content: space-around;
width: 100%;
padding: 0 10rpx;
box-sizing: border-box;
margin: 50rpx 0 20rpx;
height: 120rpx;
.welfareCont-list-img {
border-radius: 50%;
width: 120rpx;
height: 120rpx;
display: inline-block;
margin: 0 15rpx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
}
.rightsCont-btn {
background: rgba(255, 255, 0255, .4);
width: 100%;
line-height: 70rpx;
font-size: 40rpx;
font-weight: 600;
color: #000000;
padding: 0 20rpx;
box-sizing: border-box;
}
}
}
// 数量
.rightsNumber {
background-color: #ffffff;
position: relative;
padding: 30rpx 40rpx;
box-sizing: border-box;
.rightsGoods-img {
width: 200rpx;
height: 200rpx;
border-radius: 10rpx;
}
.rightsGoods {
position: absolute;
left: 0;
top: 0;
width: 100%;
padding: 80rpx 40rpx 0 270rpx;
box-sizing: border-box;
.rightsGoods-text {
margin-bottom: 40rpx;
font-weight: 600;
}
.rightsGoods-price {
display: flex;
.rightsGoods-number {
flex: 1;
font-size: 34rpx;
text {
font-size: 28rpx;
}
}
.rightsAdd {
display: flex;
.rightsAdd-btn {
border-radius: 4rpx;
text-align: center;
width: 50rpx;
height: 50rpx;
line-height: 45rpx;
font-size: 40rpx;
font-weight: 600;
}
.rightsAdd-remove {
background: #f8f8f8;
color: #d9d9d9;
}
.rightsAdd-remove.active,
.rightsAdd-plus {
background: #e8e4e5;
color: #6b6768;
}
.rightsAdd-input {
width: 100rpx;
text-align: center;
font-size: 28rpx;
line-height: 50rpx;
}
}
}
}
}
// 地址
.rightsList,
.notice,
.detailsStore {
background: white;
padding: 10rpx 0;
box-sizing: border-box;
}
.rightsLabel,
.rightsLabel-pay {
display: flex;
padding: 20rpx 40rpx;
color: #6c6c6c;
font-weight: 600;
font-size: 30rpx;
}
.rightsLabel-left {
flex: 1;
color: #747d86;
.rightsLabel-row {
width: 42rpx;
height: 42rpx;
}
}
.rightsLabel-range {
display: flex;
color: #000;
font-weight: 600;
}
.rightsLabel-address {
display: flex;
position: relative;
margin: 10rpx 0;
padding: 25rpx 40rpx;
&::after,
&::before {
position: absolute;
content: '';
left: 30rpx;
width: calc(100% - 60rpx);
height: 2rpx;
background-color: #bfbfbf;
}
&::after {
top: 0;
}
&::before {
bottom: 0;
}
.rightsLabel-row {
margin-top: 30rpx;
}
.rightsLabel-icon {
width: 70rpx;
height: 70rpx;
margin-top: 14rpx;
}
.rightsLabel-right {
width: calc(100% - 80rpx);
margin-left: 10rpx;
display: flex;
font-size: 28rpx;
.rightsLabel-address-text {
flex: 1;
color: #000000;
.rightsLabel-address-name {
display: flex;
font-size: 32rpx;
margin-bottom: 10rpx;
.rightsLabel-address-tel {
padding-left: 30rpx;
color: #959595;
}
}
}
}
}
.rightsLabel-row {
width: 42rpx;
height: 42rpx;
margin: 0 0 0 6rpx;
}
// 购买须知
.notice {
background: white;
padding: 20rpx;
box-sizing: border-box;
border-top: 20rpx #eeeeee solid;
.noticeTitle {
display: flex;
.noticeTitle-flex {
flex: 1;
display: flex;
font-size: 30rpx;
line-height: 46rpx;
.noticeTitle-img {
width: 46rpx;
height: 46rpx;
margin-right: 20rpx;
}
}
.noticeTitle-row {
width: 46rpx;
height: 46rpx;
&.active {
transform: rotate(90deg);
}
}
}
.noticeText {
font-size: 26rpx;
height: 0;
overflow: hidden;
&.active {
height: auto;
}
.noticeText-top {
margin: 30rpx 0 10rpx;
font-weight: 600;
}
.noticeText-cont {
line-height: 60rpx;
}
}
}
.newrightsBtn {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 160rpx;
z-index: 9;
background: #fff;
padding: 30rpx;
box-sizing: border-box;
display: flex;
.rightsBtn-text {
flex: 1;
font-weight: 600;
font-size: 30rpx;
.rightsBtn-text-num {
font-size: 30rpx;
margin-bottom: 10rpx;
}
text {
font-size: 38rpx;
color: #fe2d55;
}
}
button {
width: 280rpx !important;
background-color: #000000;
color: #ffffff;
border-radius: 80rpx;
height: 100rpx;
line-height: 100rpx;
padding: 0;
margin: 0;
}
}
// 选择收货地址
.addressBack {
position: fixed;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, .4);
z-index: 10;
width: 100%;
height: 100%;
display: none;
&.active {
display: block;
}
}
.addressCont {
position: fixed;
left: 0;
bottom: -1000%;
transition: .2s;
background: #fff;
z-index: 11;
width: 100%;
&.active {
bottom: 0;
}
.addressCont-title {
height: 90rpx;
line-height: 90rpx;
display: flex;
padding: 0 30rpx;
box-sizing: border-box;
font-size: 28rpx;
font-weight: 600;
position: relative;
&::after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 2rpx;
background: #f3f3f3;
}
.addressCont-left {
flex: 1;
}
.addressCont-right {
color: #309ded;
}
}
.header-classify {
white-space: nowrap;
box-sizing: border-box;
height: 600rpx;
.addressCont-list {
padding: 30rpx 20rpx;
box-sizing: border-box;
font-size: 30rpx;
overflow: hidden;
position: relative;
&::after {
position: absolute;
content: '';
left: 0;
bottom: 0;
width: 100%;
height: 2rpx;
background: #f3f3f3;
}
.addressCont-top {
display: flex;
margin-bottom: 10rpx;
.addressCont-name {
font-weight: 600;
}
}
.addressCont-text {
color: #666;
width: calc(100% - 160rpx);
}
.address-tool-icon {
width: 120rpx;
height: 54rpx;
line-height: 54rpx;
border-radius: 4rpx;
text-align: center;
color: #fff;
position: absolute;
top: 45rpx;
right: 10rpx;
background: #dfae2e;
transform: scale(.9, .9);
font-size: 24rpx;
}
}
}
}
</style>