刘文博 / gulu-vue

Download as
Browse Code »

Commit f1da24fb30607b6d39e18bac713e45778b577462

Authored by Adam
2 parents bbdb26d05a 09a4a9a0aa
Exists in master

s

Showing 36 changed files   Show diff stats
src/components/CommodityCard/CommodityCard.vue
Diff comments   View file @f1da24f
1 1 <template>
2   - <view class="card" @tap="toGoods(goods.id)">
3   - <image mode="widthFix" :src="goods.imgurl" ></image>
  2 + <view class="card" @tap="toGoods(goods.goods_id,goods.goodType)">
  3 + <image mode="widthFix" :src="goods.img" ></image>
4 4 <view class="name">{{goods.name}}</view>
5 5 <view class="info">
6 6 <view class="priceBox">
7   - <view class="price">{{goods.rsSon.Min_Price}}</view>
8   - <view class="originCost">
9   - {{Math.round(goods.rsSon.Min_Price / goods.rsSon.discount * 100)}}
10   - <!-- {{goods.oldPrice}} -->
  7 + <view class="price">{{goods.price}}</view>
  8 + <view class="originCost">
  9 + {{goods.originCost}}
11 10 </view>
12 11 </view>
13   - <view class="slogan">{{goods.trade_num}}</view>
  12 + <view class="slogan">{{goods.slogan}}</view>
14 13 </view>
15 14 </view>
16 15 </template>
... ... @@ -22,16 +21,18 @@
22 21 * 商品数据
23 22 */
24 23 goods: {
25   - id: Number,
26   - imgurl: String,
  24 + goods_id: Number,
  25 + img: String,
27 26 name: String,
28   - oldPrice:String,
  27 + originCost:String,
29 28 price: String,
30   - memo:String
  29 + slogan:String,
  30 + goodType:String,
31 31 }
32 32  
33 33 },
34 34 created() {
  35 + console.log(this.goods)
35 36 },
36 37 data() {
37 38 return {
... ... @@ -39,14 +40,45 @@
39 40 };
40 41 },
41 42 methods:{
42   - toGoods(id){
43   - console.log('toGoods =====> id======>', id)
44   - uni.navigateTo({
45   - url: `../detail/detail?oderId=1`,
46   - success: res => {},
47   - fail: () => {},
48   - complete: () => {}
49   - });
  43 + toGoods(id,type){
  44 + // console.log('toGoods =====> id======>', id)
  45 + // console.log(type)
  46 + switch(type){
  47 + case 1:
  48 + uni.navigateTo({
  49 + url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
  50 + success: res => {},
  51 + fail: () => {},
  52 + complete: () => {}
  53 + });
  54 + break;
  55 + case 2:
  56 + uni.navigateTo({
  57 + url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
  58 + success: res => {},
  59 + fail: () => {},
  60 + complete: () => {}
  61 + });
  62 + break;
  63 + case 3:
  64 + uni.navigateTo({
  65 + url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
  66 + success: res => {},
  67 + fail: () => {},
  68 + complete: () => {}
  69 + });
  70 + break;
  71 + case 4:
  72 + uni.navigateTo({
  73 + url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
  74 + success: res => {},
  75 + fail: () => {},
  76 + complete: () => {}
  77 + });
  78 + break;
  79 + default :
  80 + break
  81 + }
50 82 }
51 83 }
52 84 }
... ...
src/components/UniCollapseItem/UniCollapseItem.vue
Diff comments   View file @f1da24f
... ... @@ -16,7 +16,9 @@
16 16 <!-- #endif -->
17 17 </view>
18 18 <view :class="{'uni-collapse-cell__content--hide':!isOpen}" class="uni-collapse-cell__content">
19   - <view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__wrapper" :style="{'transform':isOpen?'translateY(0)':'translateY(-100%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-100%)'}">
  19 + <view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__wrapper"
  20 + :style="{'transform':isOpen?'translateY(0)':'translateY(-100%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-100%)'}"
  21 + >
20 22 <slot />
21 23 </view>
22 24 </view>
... ... @@ -138,9 +140,9 @@
138 140 }
139 141  
140 142 .uni-collapse-cell--animation {
141   - transition: transform 0.5s ease;
  143 + transition: transform 0s ease;
142 144 transition-property: transform;
143   - transition-duration: 0.5s;
  145 + transition-duration: 0s;
144 146 transition-timing-function: ease;
145 147 }
146 148  
... ...
src/components/UniCountdown/UniCountdown.vue
Diff comments   View file @f1da24f
... ... @@ -0,0 +1,190 @@
  1 +<template>
  2 + <view class="uni-countdown">
  3 + <text v-if="showDay" :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ d }}</text>
  4 + <text v-if="showDay" :style="{ color: splitorColor }" class="uni-countdown__splitor">天</text>
  5 + <text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ h }}</text>
  6 + <text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '时' }}</text>
  7 + <text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ i }}</text>
  8 + <text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '分' }}</text>
  9 + <text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ s }}</text>
  10 + <text v-if="!showColon" :style="{ color: splitorColor }" class="uni-countdown__splitor">秒</text>
  11 + </view>
  12 +</template>
  13 +<script>
  14 + export default {
  15 + name: 'UniCountdown',
  16 + props: {
  17 +
  18 + showDay: {
  19 + type: Boolean,
  20 + default: true
  21 + },
  22 + showColon: {
  23 + type: Boolean,
  24 + default: true
  25 + },
  26 + backgroundColor: {
  27 + type: String,
  28 + default: '#FFFFFF'
  29 + },
  30 + borderColor: {
  31 + type: String,
  32 + default: '#000000'
  33 + },
  34 + color: {
  35 + type: String,
  36 + default: '#000000'
  37 + },
  38 + splitorColor: {
  39 + type: String,
  40 + default: '#000000'
  41 + },
  42 + day: {
  43 + type: Number,
  44 + default: 0
  45 + },
  46 + hour: {
  47 + type: Number,
  48 + default: 0
  49 + },
  50 + minute: {
  51 + type: Number,
  52 + default: 0
  53 + },
  54 + second: {
  55 + type: Number,
  56 + default: 0
  57 + }
  58 + },
  59 + data() {
  60 + return {
  61 + timer: null,
  62 + syncFlag: false,
  63 + d: '00',
  64 + h: '00',
  65 + i: '00',
  66 + s: '00',
  67 + leftTime: 0,
  68 + seconds: 0
  69 + }
  70 + },
  71 + watch: {
  72 + day(val) {
  73 + this.changeFlag()
  74 + },
  75 + hour(val) {
  76 + this.changeFlag()
  77 + },
  78 + minute(val) {
  79 + this.changeFlag()
  80 + },
  81 + second(val) {
  82 + this.changeFlag()
  83 + }
  84 + },
  85 + created: function(e) {
  86 + this.startData();
  87 + },
  88 + beforeDestroy() {
  89 + clearInterval(this.timer)
  90 + },
  91 + methods: {
  92 + toSeconds(day, hours, minutes, seconds) {
  93 + return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
  94 + },
  95 + timeUp() {
  96 + clearInterval(this.timer)
  97 + this.$emit('timeup')
  98 + },
  99 + countDown() {
  100 + let seconds = this.seconds
  101 + let [day, hour, minute, second] = [0, 0, 0, 0]
  102 + if (seconds > 0) {
  103 + day = Math.floor(seconds / (60 * 60 * 24))
  104 + hour = Math.floor(seconds / (60 * 60)) - (day * 24)
  105 + minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
  106 + second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
  107 + } else {
  108 + this.timeUp()
  109 + }
  110 + if (day < 10) {
  111 + day = '0' + day
  112 + }
  113 + if (hour < 10) {
  114 + hour = '0' + hour
  115 + }
  116 + if (minute < 10) {
  117 + minute = '0' + minute
  118 + }
  119 + if (second < 10) {
  120 + second = '0' + second
  121 + }
  122 + this.d = day
  123 + this.h = hour
  124 + this.i = minute
  125 + this.s = second
  126 + },
  127 + startData() {
  128 + this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
  129 + if (this.seconds <= 0) {
  130 + return
  131 + }
  132 + this.countDown()
  133 + this.timer = setInterval(() => {
  134 + this.seconds--
  135 + if (this.seconds < 0) {
  136 + this.timeUp()
  137 + return
  138 + }
  139 + this.countDown()
  140 + }, 1000)
  141 + },
  142 + changeFlag() {
  143 + if (!this.syncFlag) {
  144 + this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
  145 + this.startData();
  146 + this.syncFlag = true;
  147 + }
  148 + clearInterval(this.timer)
  149 + }
  150 + }
  151 + }
  152 +</script>
  153 +<style lang="scss" scoped>
  154 + @import '~@/uni.scss';
  155 + $countdown-height: 48rpx;
  156 + $countdown-width: 52rpx;
  157 +
  158 + .uni-countdown {
  159 + /* #ifndef APP-NVUE */
  160 + display: flex;
  161 + /* #endif */
  162 + flex-direction: row;
  163 + justify-content: flex-start;
  164 + padding: 2rpx 0;
  165 + }
  166 +
  167 + .uni-countdown__splitor {
  168 + /* #ifndef APP-NVUE */
  169 + display: flex;
  170 + /* #endif */
  171 + justify-content: center;
  172 + line-height: $countdown-height;
  173 + padding: 5rpx;
  174 + font-size: 18px;
  175 + }
  176 +
  177 + .uni-countdown__number {
  178 + /* #ifndef APP-NVUE */
  179 + display: flex;
  180 + /* #endif */
  181 + justify-content: center;
  182 + align-items: center;
  183 + width: $countdown-width;
  184 + height: $countdown-height;
  185 + line-height: $countdown-height;
  186 + margin: 5rpx;
  187 + text-align: center;
  188 + font-size: 18px;
  189 + }
  190 +</style>
... ...
src/components/UniSliper/UniSliper.vue
Diff comments   View file @f1da24f
... ... @@ -0,0 +1,207 @@
  1 +<template>
  2 + <div class="c-progress">
  3 + <div class="c-progress-outer" :style="setProgressBgStyle" ref="progress">
  4 + <div class="c-progress-inner" :style="setProgressStyle"></div>
  5 + <div v-if="showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div>
  6 + </div>
  7 + <span v-if="showPerText">{{stand_width}}mm</span>
  8 + </div>
  9 +</template>
  10 +
  11 +<script>
  12 + // 使用了element的颜色
  13 + const colorTable = {
  14 + success: '#13ce66',
  15 + fail: '#ff4949',
  16 + warning: '#e6a23c',
  17 + default: '#409EFF'
  18 + }
  19 + export default {
  20 + name: 'CProgress',
  21 + props: {
  22 + percent: {
  23 + type: Number,
  24 + default: 60
  25 + },
  26 + showSlider: {
  27 + type: Boolean,
  28 + default: true
  29 + },
  30 + showPerText: {
  31 + type: Boolean,
  32 + default: true
  33 + },
  34 + // 进度条的宽度
  35 + width: {
  36 + type: Number,
  37 + default: 300
  38 + },
  39 + bgColor: {
  40 + type: String,
  41 + default: '#ebeef5'
  42 + },
  43 + progressColor: {
  44 + type: String,
  45 + default: '#409EFF'
  46 + },
  47 + // 滑块的宽度
  48 + sliderWidth: {
  49 + type: Number,
  50 + default: 20
  51 + },
  52 + // 颜色的类型
  53 + type: {
  54 + type: String,
  55 + default: colorTable.default
  56 + },
  57 + //规格长度
  58 + standard:{
  59 + type: Number,
  60 + default: 1.4
  61 + },
  62 + //初始长度
  63 + stand_width:{
  64 + type: Number,
  65 + default: 0
  66 + }
  67 + },
  68 + data () {
  69 + return {
  70 + sliderLeft: 0, // 滑块相对父元素发x坐标
  71 + progressWidth: 0, // 进度条当前的的宽度
  72 + tempPercent: 0,
  73 + }
  74 + },
  75 + computed: {
  76 + // 设置进度条的背景样式
  77 + setProgressBgStyle () {
  78 + return {
  79 + // 加上滑块的宽度
  80 + width: `${this.width + this.sliderWidth}px`
  81 + }
  82 + },
  83 + // 设置进度条的样式
  84 + setProgressStyle () {
  85 + const color = colorTable[this.type] || this.progressColor
  86 + return {
  87 + width: `${this.progressWidth}px`,
  88 + background: color
  89 + }
  90 + },
  91 + // 设置滑块的样式
  92 + setSliderStyle () {
  93 + const color = colorTable[this.type] || this.progressColor
  94 + return {
  95 + border: `1px solid ${color}`,
  96 + width: `${this.sliderWidth}px`,
  97 + height: `${this.sliderWidth}px`,
  98 + left: `${this.sliderLeft}px`
  99 + }
  100 + }
  101 + },
  102 + mounted () {
  103 + this.sliderLeft = this.width / 100 * this.percent
  104 + this.progressWidth = this.sliderLeft + this.sliderWidth // 滑块的x坐标加上滑块的宽度
  105 + this.tempPercent = this.percent
  106 + this.addListener()
  107 + },
  108 + methods: {
  109 + addListener () {
  110 + const slider = this.$refs.slider
  111 + const progress = this.$refs.progress
  112 + let isClickSlider = false
  113 + let distance = 0 // 滑块与点击坐标的绝对距离
  114 + progress.onclick = (e) => {
  115 + // 阻止事件冒泡
  116 + if (e.target == slider) {
  117 + return
  118 + }
  119 + let curX = progress.offsetLeft
  120 + this.sliderLeft = e.pageX - curX
  121 + if (this.sliderLeft <= 0) {
  122 + this.sliderLeft = 0
  123 + }
  124 + if (this.sliderLeft >= this.width) {
  125 + this.sliderLeft = this.width
  126 + }
  127 + this._countCurPercent()
  128 + }
  129 + // slider.onmousedown = (e) => {
  130 + // isClickSlider = true
  131 + // let curX = slider.offsetLeft
  132 + // distance = e.pageX - curX // 得出绝对距离
  133 + // }
  134 + progress.onmousemove = (e) => {
  135 + if (isClickSlider) {
  136 + // 判断是否已经超出进度条的长度
  137 + if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) {
  138 + this.sliderLeft = e.pageX - distance
  139 + this._countCurPercent()
  140 + }
  141 + }
  142 + }
  143 + progress.onmouseup = () => {
  144 + isClickSlider = false
  145 + }
  146 + },
  147 + // 算出百分比
  148 + _countCurPercent () {
  149 + this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100))
  150 + this.progressWidth = this.sliderLeft + 20
  151 + // 取整的时候宽度可能不为0，所以在0和100的时候也将宽度取整
  152 + if (this.tempPercent <= 0) {
  153 + this.progressWidth = 0
  154 + this.sliderLeft = 0
  155 + }
  156 + if (this.tempPercent >= 100) {
  157 + this.progressWidth = this.width + 20
  158 + this.sliderLeft = this.width
  159 + }
  160 + this.stand_width = this.tempPercent*this.standard
  161 + this.stand_width = parseInt(this.stand_width/1) //取整
  162 + this.$emit('percentChange', this.tempPercent)
  163 + }
  164 + }
  165 + }
  166 +</script>
  167 +
  168 +<style scoped lang="scss">
  169 + .c-progress {
  170 + $width: 300px;
  171 + $radius: 5px;
  172 + display: flex;
  173 + align-items: center;
  174 +
  175 + span {
  176 + margin-left: 5px;
  177 + font-size: 14px;
  178 + color: #666;
  179 + }
  180 +
  181 + .c-progress-outer {
  182 + width: $width;
  183 + height: 10px;
  184 + background: #ebeef5;
  185 + position: relative;
  186 + display: flex;
  187 + align-items: center;
  188 +
  189 + .c-progress-inner {
  190 + width: 100px;
  191 + height: 10px;
  192 + background: #409EFF;
  193 + }
  194 +
  195 + .c-progress-slider {
  196 + width: 20px;
  197 + height: 20px;
  198 + border-radius: 50%;
  199 + background: #fff;
  200 + border: 1px solid #409EFF;
  201 + position: absolute;
  202 + z-index: 10;
  203 + left: 10px;
  204 + }
  205 + }
  206 + }
  207 +</style>
0 208 \ No newline at end of file
... ...
1 1 {
2 2 "pages": [
3 3 {
4   - "path": "pages/cart/cart",
5   - "style": {
6   - "navigationBarTitleText": "购物车"
7   - }
8   - },
9   - {
10 4 "path": "pages/index/index",
11 5 "style": {
12 6 "navigationBarTitleText": "商城一览"
13 7 }
14 8 },
  9 + {
  10 + "path" : "pages/myOrder/myOrder",
  11 + "style" : {
  12 + "navigationBarTitleText": "我的订单"}
  13 + },
15 14 {
16 15 "path": "pages/frameDetail/frameDetail",
17 16 "style": {
... ... @@ -24,6 +23,12 @@
24 23 "navigationBarTitleText": "产品详情"
25 24 }
26 25 },
  26 + {
  27 + "path": "pages/cart/cart",
  28 + "style": {
  29 + "navigationBarTitleText": "购物车"
  30 + }
  31 + },
27 32 {
28 33 "path" : "pages/purchaseLenses/purchaseLenses",
29 34 "style" : {
... ... @@ -36,11 +41,6 @@
36 41 "navigationBarTitleText": "申请退款"
37 42 }
38 43 },
39   - {
40   - "path" : "pages/myOrder/myOrder",
41   - "style" : {
42   - "navigationBarTitleText": "我的订单"}
43   - },
44 44 {
45 45 "path": "pages/addAddress/addAddress",
46 46 "style": {
... ... @@ -50,14 +50,15 @@
50 50 {
51 51 "path" : "pages/confirmOrder/confirmOrder",
52 52 "style" : {
53   - "navigationBarTitleText": "确认订单"}
54   - },
55   - {
56   - "path": "pages/user/user",
57   - "style": {
58   - "navigationBarTitleText": "我的"
  53 + "navigationBarTitleText": "确认订单"
59 54 }
60 55 },
  56 + {
  57 + "path": "pages/user/user",
  58 + "style": {
  59 + "navigationBarTitleText": "我的"
  60 + }
  61 + },
61 62 {
62 63 "path": "pages/refundment/refundWays"
63 64 },
... ... @@ -68,11 +69,35 @@
68 69 "path": "pages/predelivery/predelivery"
69 70 },
70 71 {
71   - "path": "pages/customerService/customerService"
  72 + "path": "pages/customerService/customerService",
  73 + "style":{
  74 + "navigationBarTitleText" : "在线客服"
  75 + }
  76 + },
  77 + {
  78 + "path": "pages/myOrderPaying/myOrderPaying",
  79 + "style":{
  80 + "navigationBarTitleText" : "我的订单"
  81 + }
  82 + },
  83 + {
  84 + "path": "pages/detailsChoiceArgs/detailsChoiceArgs",
  85 + "style":{
  86 + "navigationBarTitleText" : "镜片名称名称"
  87 + }
  88 + },
  89 + {
  90 + "path" : "pages/detailStandard/detailStandard_sun",
  91 + "style": {
  92 + "navigationBarTitleText": "太阳镜选购页"
  93 + }
72 94 },
73 95 {
74   - "path": "pages/myOrderPaying/myOrderPaying"
75   - }
  96 + "path" : "pages/detailStandard/detailStandard_k",
  97 + "style": {
  98 + "navigationBarTitleText": "镜框选购页"
  99 + }
  100 + }
76 101  
77 102 ],
78 103 "globalStyle": {
... ... @@ -105,5 +130,15 @@
105 130 "text": "我的"
106 131 }
107 132 ]
  133 + },
  134 + "condition" : { //模式配置，仅开发期间生效
  135 + "current": 0, //当前激活的模式(list 的索引项)
  136 + "list": [
  137 + {
  138 + "name": "", //模式名称
  139 + "path": "", //启动页面，必选
  140 + "query": "" //启动参数，在页面的onLoad函数里面得到
  141 + }
  142 + ]
108 143 }
109   -}
  144 +}
110 145 \ No newline at end of file
... ...
src/pages/Predelivery/Predelivery.vue
View file @bbdb26d
... ... @@ -1,151 +0,0 @@
1   -<template>
2   - <view class="container">
3   - <view v-for="(items) in form" :key="items.key" class="order">
4   - <view class="order_number">订单号：{{items.orderNum}}<span>待发货</span></view>
5   - <view class="order_detail">
6   - <view class="detail_img"><image v-bind:src="items.img"></image></view>
7   - <view class="detail_zi">
8   - <view class="zi_name">{{items.name}}</view>
9   - <view class="zi_standard">规格：{{items.standard}}</view>
10   - <view class="zi_preprice">￥{{items.preprice}}<span>X{{items.number}}</span></view>
11   - </view>
12   - </view>
13   - <view class="now_price">实付：<span>￥{{items.nowprice}}</span></view>
14   - <view class="clear"></view>
15   - <view class="button">
16   - <view class="button1">申请退款</view>
17   - <view class="button2">提醒发货</view>
18   - </view>
19   - </view>
20   - </view>
21   -</template>
22   -
23   -<script>
24   -export default {
25   - data(){
26   - return{
27   - form:[
28   - {
29   - key: 0,
30   - name:'商品名称',
31   - standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',
32   - img: '/static/img/detail/delivery.png',
33   - preprice: 180,
34   - number:1,
35   - orderNum: 2034867958596334,
36   - nowprice: 110,
37   - }
38   - ]
39   -
40   - }
41   - }
42   -}
43   -</script>
44   -
45   -<style lang="scss">
46   -.container{
47   - width: 100%;
48   - height: 100%;
49   - background: #F2F2F2;
50   - height: 700px;
51   - //要获取屏幕大小
52   -}
53   -.order{
54   - background: #FFFFFF;
55   - width: 90%;
56   - height: 450rpx;
57   - margin: 0 auto;
58   - padding: 40rpx;
59   - box-sizing: border-box;
60   - border-radius: 5px;
61   -}
62   -.order_number{
63   - color: #999999;
64   - font-size: 12px;
65   - font-family: "PingFangSC-Regular";
66   - span{
67   - font-family: PingFangSC-Regular;
68   - font-size: 14px;
69   - color: #FF6B4A;
70   - letter-spacing: -0.26px;
71   - line-height: 18px;
72   - float: right;
73   - }
74   -}
75   -.order_detail{
76   - display: flex;
77   - justify-content: space-around;
78   - margin-top: 12px;
79   -}
80   -.detail_img image{
81   - width: 188rpx;
82   - height: 188rpx;
83   -}
84   -.detail_zi{
85   - font-family: PingFangSC-Regular;
86   - width: 55%;
87   - height: 100%;
88   - view{
89   - margin-bottom: 20rpx;
90   - }
91   - .zi_name{
92   - font-size: 14px;
93   - color: #333333;
94   - letter-spacing: -0.26px;
95   - line-height: 18px;
96   - }
97   - .zi_standard{
98   - font-size: 12px;
99   - color: #999999 ;
100   - }
101   - .zi_preprice{
102   - font-size: 14px;
103   - color: #FF6B4A;
104   - span{
105   - float: right;
106   - font-size: 12px;
107   - color: #999999;
108   - }
109   - }
110   -}
111   -.now_price{
112   - font-size: 14px;
113   - color: #333333;
114   - float: right;
115   - span{
116   - font-size: 14px;
117   - color: #FF6B4A ;
118   - }
119   -}
120   -.clear{
121   - clear: both;
122   -}
123   -.button{
124   - display: flex;
125   - justify-content: flex-end;
126   - margin-top: 14px;
127   - view{
128   - width: 156rpx;
129   - height: 48rpx;
130   - border-radius: 12px;
131   - font-size: 12px;
132   - text-align: center;
133   - line-height: 20px;
134   - }
135   - .button1{
136   - border: 1px solid #FF6B4A;
137   - font-family: PingFangSC-Regular;
138   - color: #FF6B4A;
139   - letter-spacing: -0.23px;
140   - margin-right: 30rpx;
141   - }
142   - .button2{
143   - border: 1px solid #FF6B4A;
144   - background: #FF6B4A;
145   - font-family: PingFangSC-Regular;
146   - color: #FFFFFF;
147   - letter-spacing: -0.23px;
148   -
149   - }
150   -}
151   -</style>
152 0 \ No newline at end of file
src/pages/cart/cart.vue
Diff comments   View file @f1da24f
1 1 <template>
2 2 <view class="content">
3   - <checkbox-group name="">
4   - <label>
5   - <view class="card">
6   - <view class="cardHeader">
7   - <checkbox color="#FF6B4A" :value="totalPrice" style="transform:scale(0.7)"/>
8   - <image src="../../static/customerService-btn.png" mode="aspectFill"></image>
9   - <text>非常戴镜</text>
  3 +
  4 + <view class="card">
  5 + <view class="cardHeader">
  6 + <!-- <MyCheckbox :isOpenProp="controlCheck.partent" ></MyCheckbox> -->
  7 + <block v-if="pIsoPen">
  8 + <view class="partentChecked" @click="pChange(pIsoPen)">
  9 + <span class="status correct"></span>
10 10 </view>
11   - <view class="cardBody">
12   - <checkbox color="#FF6B4A" :value="totalPrice" style="transform:scale(0.7)" />
13   - <view class="goodInfo">
14   - <view class="imageWrap">
15   - <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
16   - </view>
17   - <view class="infoRight">
18   - <text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text>
19   - <view class="describ"><text>支持7天无理由退货 顺丰发货支持7天无理由退货 顺丰发货支持7天无理由退货 顺丰发货</text>
20   - <!-- <text class="icon">></text> -->
21   - </view>
22   - <view class="priceBox">
23   - <view class="price">￥198</view>
24   - <text>(限购{{maxCount}}副)</text>
25   - <view class="counter">
26   - <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
27   - <text>{{count}}</text>
28   - <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
29   - </view>
30   - </view>
  11 + </block>
  12 + <block v-else>
  13 + <view class="partentCheck" @click="pChange(pIsoPen)"></view>
  14 + </block>
  15 + <image src="../../static/store.png" mode="aspectFill"></image>
  16 + <text>非常戴镜</text>
  17 + </view>
  18 +
  19 + <view class="cardBody">
  20 + <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> -->
  21 + <template v-if="childIsOpen.child1">
  22 + <view class="partentChecked" @click="cChange(childIsOpen.child1,'child1')">
  23 + <span class="status correct"></span>
  24 + </view>
  25 + </template>
  26 + <template v-else>
  27 + <view class="partentCheck" @click="cChange(childIsOpen.child1,'child1')"></view>
  28 + </template>
  29 + <view class="goodInfo">
  30 + <view class="imageWrap">
  31 + <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
  32 + </view>
  33 + <view class="infoRight">
  34 + <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text>
  35 + <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text>
  36 + <!-- <text class="icon">></text> -->
  37 + </view>
  38 + <view class="priceBox">
  39 + <view class="price">￥{{198}}</view>
  40 + <text>(限购{{maxCount}}副)</text>
  41 + <view class="counter">
  42 + <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
  43 + <text>{{count}}</text>
  44 + <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
31 45 </view>
32 46 </view>
33 47 </view>
34 48 </view>
35   - </label>
36   - </checkbox-group>
37   -
  49 + </view>
  50 + <view class="cardBody">
  51 + <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> -->
  52 + <template v-if="childIsOpen.child2">
  53 + <view class="partentChecked" @click="cChange(childIsOpen.child2,'child2')">
  54 + <span class="status correct"></span>
  55 + </view>
  56 + </template>
  57 + <template v-else>
  58 + <view class="partentCheck" @click="cChange(childIsOpen.child2,'child2')"></view>
  59 + </template>
  60 + <view class="goodInfo">
  61 + <view class="imageWrap">
  62 + <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
  63 + </view>
  64 + <view class="infoRight">
  65 + <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text>
  66 + <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text>
  67 + <!-- <text class="icon">></text> -->
  68 + </view>
  69 + <view class="priceBox">
  70 + <view class="price">￥198</view>
  71 + <text>(限购{{maxCount}}副)</text>
  72 + <view class="counter">
  73 + <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
  74 + <text>{{count}}</text>
  75 + <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
  76 + </view>
  77 + </view>
  78 + </view>
  79 + </view>
  80 + </view>
  81 + </view>
38 82  
39 83 <view class="footer">
40 84 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
41 85 <view class="footerRight">
42   - <view class="paybtn">立即支付</view>
  86 + <navigator url="/pages/myOrderPaying/myOrderPaying" hover-class="navigator-hover">
  87 + <view class="paybtn">立即支付</view>
  88 + </navigator>
43 89 </view>
44 90 </view>
  91 +
45 92 </view>
46 93 </template>
47 94  
48 95 <script>
49 96 export default {
  97 +
50 98 data() {
51 99 return {
52 100 totalPrice: 360,
53 101 count:1,
54 102 maxCount:20,
  103 + pIsoPen: false,
  104 + childIsOpen:{
  105 + "child1":true,
  106 + "child2":true
  107 + },
55 108 }
56 109 },
57 110 onLoad() {
58 111  
59   - },
  112 + }
  113 + ,
60 114 methods: {
61 115 counter(isadd){
62 116 if(isadd){
... ... @@ -65,6 +119,21 @@
65 119 this.count <= 1? this.desDisabled = true:this.count--;
66 120 }
67 121 },
  122 + pChange(isopen){
  123 + // console.log(isopen)
  124 + this.pIsoPen=!isopen
  125 + this.childIsOpen.child1=!isopen
  126 + this.childIsOpen.child2=!isopen
  127 + },
  128 + cChange(isopen,child){
  129 + // console.log(child)
  130 + if(child==='child1'){
  131 + this.childIsOpen.child1=!isopen
  132 + }
  133 + if(child==='child2'){
  134 + this.childIsOpen.child2=!isopen
  135 + }
  136 + }
68 137 }
69 138 }
70 139 </script>
... ... @@ -72,7 +141,7 @@
72 141 <style lang="scss">
73 142 .content {
74 143 min-height: 100vh;
75   - background-color: #F7F6F6;
  144 + background-color: #f2f2f2;
76 145 display: flex;
77 146 flex-direction: column;
78 147 align-items: center;
... ... @@ -80,6 +149,40 @@
80 149 padding: 20rpx 40rpx;
81 150 box-sizing: border-box;
82 151  
  152 + .partentCheck{
  153 + width: 16px;
  154 + height: 16px;
  155 + border-radius: 18px;
  156 + border: 1px solid #CFCFCF;
  157 + background-color: #FFFFFF;
  158 + }
  159 + .partentChecked{
  160 + width: 18px;
  161 + height: 18px;
  162 + border-radius: 18px;
  163 + background-color: #FF6B4A;
  164 + .correct {
  165 + display: inline-block;
  166 + width: 5px;
  167 + height: 1px;
  168 + background: #FFFFFF;
  169 + line-height: 0;
  170 + font-size: 0;
  171 + position: relative;
  172 + top: -6px;
  173 + left: 4px;
  174 + -webkit-transform: rotate(45deg);
  175 + }
  176 + .correct:after {
  177 + content: '/';
  178 + display: block;
  179 + width: 8px;
  180 + height: 1px;
  181 + background: #FFFFFF;
  182 + -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
  183 + }
  184 + }
  185 +
83 186 .card{
84 187 background-color: #FFFFFF;
85 188 border-radius: 16rpx;
... ... @@ -98,6 +201,14 @@
98 201 image{
99 202 height: 32rpx;
100 203 width: 32rpx;
  204 + padding-left: 6px;
  205 + padding-right: 10px;
  206 + }
  207 + text{
  208 + // font-family: PingFangSC-Regular;
  209 + font-size: 14px;
  210 + color: #333333;
  211 + letter-spacing: -0.26px;
101 212 }
102 213 }
103 214 .cardBody{
... ... @@ -111,11 +222,13 @@
111 222 display: flex;
112 223 flex-direction: row;
113 224 justify-content: flex-start;
  225 + padding-left: 6px;
114 226 .imageWrap{
115 227 height: 188rpx;
116 228 width: 188rpx;
117   - margin-right: 28rpx;
  229 + margin-right: 28rpx;
118 230 image{
  231 + border-radius: 4px;
119 232 height: 188rpx;
120 233 width: 188rpx;
121 234 }
... ... @@ -125,7 +238,7 @@
125 238 flex-direction: column;
126 239 align-items: flex-start;
127 240 justify-content: space-between;
128   - height: 220rpx;
  241 + height: 240rpx;
129 242 .goodName{
130 243 font-size: 28rpx;
131 244 color: #333333;
... ... @@ -155,6 +268,7 @@
155 268 display: flex;
156 269 justify-content: space-between;
157 270 align-items: center;
  271 + // margin-top: 26px;
158 272 width: 100%;
159 273 font-size: 14px;
160 274 color: #999999;
... ... @@ -189,7 +303,7 @@
189 303 .footer{
190 304 position: fixed;
191 305 left: 0;
192   - bottom: 0;
  306 + bottom: 0px;
193 307 height: 112rpx;
194 308 width: 100%;
195 309 background-color: #FFFFFF;
... ... @@ -229,4 +343,6 @@
229 343 }
230 344 }
231 345  
  346 +
  347 +
232 348 </style>
... ...
src/pages/detailStandard/detailStandard_k.vue
Diff comments   View file @f1da24f
... ... @@ -0,0 +1,390 @@
  1 +<template>
  2 + <view class="container">
  3 + <view class="detail">
  4 + <view class="detail1"><image v-bind:src="detail.image"></image></view>
  5 + <view class="detail2">
  6 + <view class="detail2_name">{{detail.name}}</view>
  7 + <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view>
  8 + <view class="detail2_price"><span>￥{{detail.price}}</span></view>
  9 + </view>
  10 + </view>
  11 + <view class="choose">
  12 + <view class="colour">
  13 + <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala2.png"></image></view>
  14 + <view class="colour_exp">*黑色 BHL192345</view>
  15 + <view class="colour2">
  16 + <view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view>
  17 + </view>
  18 + <hr/>
  19 + </view>
  20 + <view class="size">
  21 + <view class="size1">
  22 + <view class="size1_1">框架尺寸</view>
  23 + <view><span>+￥20</span><image src="/static/img/detail/xiala2.png"></image></view>
  24 + </view>
  25 + <view class="size2">
  26 + <view>通用</view>
  27 + <view>定制</view>
  28 + </view>
  29 + <view class="D3_list">
  30 + <view v-for="(item) in parameter" :key="item.key">
  31 + <view><image class="D3_image" v-bind:src = "item.img"></image></view>
  32 + <view class="D3_list_jDu">
  33 + <!-- uni-sliper插件 -->
  34 + <c-progress class="c-progress"
  35 + :percent="item.percent"
  36 + :show-slider="false" :width="190"
  37 + :standard="item.standard_l"
  38 + :stand_width="item.slength"
  39 + progressColor="#FF6B4A"
  40 + />
  41 + <view>{{item.standard}}</view>
  42 + </view>
  43 + </view>
  44 + <hr/>
  45 + </view>
  46 + </view>
  47 + <view class="part">
  48 + <view class="size1">
  49 + <view class="size1_1">配件</view>
  50 + <view><span>+￥0.00</span><image src="/static/img/detail/xiala2.png"></image></view>
  51 + </view>
  52 + <view class="colour_exp">*0290</view>
  53 + <view class="part_som">
  54 + <view v-for="(part) in part" :key="part.key"><image v-bind:src="part.img"></image></view>
  55 + </view>
  56 + </view>
  57 + </view>
  58 + <view class="buy">
  59 + <view class="buy1">选了镜框，想选镜片？</view>
  60 + <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view>
  61 + <view class="buy3">
  62 + <view class="buy3_1">暂时不选</view>
  63 + <view class="buy3_2">立即去选</view>
  64 + </view>
  65 + </view>
  66 + <view class="zhanwei"></view>
  67 + <view class="button"><view>立即结算</view></view>
  68 + </view>
  69 +</template>
  70 +<script>
  71 +import CProgress from '../../components/UniSliper/UniSliper'
  72 +
  73 +export default {
  74 + components: {
  75 + CProgress
  76 + },
  77 + data(){
  78 + return{
  79 + detail:{
  80 + image:'/static/img/detail/d1.png',
  81 + name:'商品名称商品名称商品名称商品名称商品名称',
  82 + price: 180,
  83 + number: 1,
  84 + },
  85 + //框架颜色
  86 + colour:[
  87 + {key:0 ,img: '/static/img/detail/Kuang/s1.png'},
  88 + {key:1 ,img: '/static/img/detail/Kuang/s2.png'},
  89 + {key:2 ,img: '/static/img/detail/Kuang/s3.png'},
  90 + {key:3 ,img: '/static/img/detail/Kuang/s4.png'},
  91 + {key:4 ,img: '/static/img/detail/Kuang/s5.png'},
  92 + {key:5 ,img: '/static/img/detail/Kuang/s6.png'},
  93 + {key:6 ,img: '/static/img/detail/Kuang/s7.png'}
  94 + ],
  95 + //规格
  96 + parameter:[
  97 + {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139,standard_l:1.4,percent:100},
  98 + {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51,standard_l:1,percent:50},
  99 + {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45,standard_l:1,percent:50},
  100 + {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19,standard_l:0.4,percent:30},
  101 + {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138,standard_l:1.6,percent:60},
  102 + ],
  103 + //配饰
  104 + part:[
  105 + {key: 0,img:'/static/img/detail/Kuang/g1.png'},
  106 + {key: 1,img:'/static/img/detail/Kuang/g1.png'},
  107 + {key: 2,img:'/static/img/detail/Kuang/g2.png'},
  108 + {key: 3,img:'/static/img/detail/Kuang/g1.png'},
  109 + {key: 4,img:'/static/img/detail/Kuang/g1.png'},
  110 + {key: 5,img:'/static/img/detail/Kuang/g3.png'},
  111 + {key: 6,img:'/static/img/detail/Kuang/g3.png'},
  112 + {key: 7,img:'/static/img/detail/Kuang/g2.png'},
  113 + ],
  114 + }
  115 + }
  116 +}
  117 +</script>
  118 +
  119 +<style lang="scss">
  120 +.container{
  121 + min-height: 100vh;
  122 + background: #F2F2F2;
  123 + padding-top: 10px;
  124 + box-sizing: border-box;
  125 +}
  126 +hr{
  127 + border: none;
  128 + height: 1px;
  129 + background: #F2F2F2;
  130 + margin-top: 18px;
  131 +}
  132 +.detail{
  133 + height: 272rpx;
  134 + background: #FFFFFF;
  135 + border-radius: 8px;
  136 + padding: 16px;
  137 + box-sizing: border-box;
  138 + display: flex;
  139 + justify-content: space-between;
  140 + align-items: center;
  141 +}
  142 +.detail1{
  143 + height: 188rpx;
  144 + width: 188rpx;
  145 + image{
  146 + width: 100%;
  147 + height: 100%;
  148 + border-radius: 8px;
  149 + }
  150 +}
  151 +.detail2{
  152 + width: 68%;
  153 + view{
  154 + margin-bottom: 8px;
  155 + font-family: PingFangSC-Regular;
  156 + }
  157 + .detail2_name{
  158 + font-size: 14px;
  159 + color: #333333;
  160 + letter-spacing: -0.26px;
  161 + line-height: 18px;
  162 + }
  163 + .detail2_tui{
  164 + font-size: 10px;
  165 + color: #999999;
  166 + letter-spacing: -0.19px;
  167 + span{
  168 + margin-right: 10px;
  169 + }
  170 + }
  171 + .detail2_price{
  172 + font-size: 14px;
  173 + color: #FF6B4A;
  174 + letter-spacing: -0.26px;
  175 + }
  176 +}
  177 +.choose{
  178 + background: #FFFFFF;
  179 + padding: 16px;
  180 + box-sizing: border-box;
  181 + margin-top: 10px;
  182 + border-radius: 8px;
  183 + .colour1{
  184 + span{
  185 + font-family: PingFangSC-Medium;
  186 + font-size: 16px;
  187 + color: #333333;
  188 + letter-spacing: -0.3px;
  189 + text-align: justify;
  190 + line-height: 24px;
  191 + font-weight: bold;
  192 + }
  193 + image{
  194 + float: right;
  195 + width: 40rpx;
  196 + height: 36rpx;
  197 + }
  198 + }
  199 + .colour_exp{
  200 + font-family: PingFangSC-Regular;
  201 + font-size: 12px;
  202 + color: #666666;
  203 + letter-spacing: 0;
  204 + margin-top: 10px;
  205 + margin-bottom: 10px;
  206 + }
  207 + .colour2{
  208 + display: grid;
  209 + grid-template-columns: repeat(5, 17%);
  210 + justify-content: space-between ;
  211 + grid-row-gap: 10px;
  212 + margin-bottom: 14px;
  213 + view{
  214 + border: 1px solid #F2F2F2;
  215 + image{
  216 + width: 100%;
  217 + height: 100%;
  218 + }
  219 + }
  220 + view:hover{
  221 + border: 1px solid #FF6B4A;
  222 + }
  223 + }
  224 +}
  225 +.size,.part{
  226 + margin-top:14px;
  227 + .size1{
  228 + display: flex;
  229 + justify-content: space-between;
  230 + margin-bottom: 10px;
  231 + .size1_1{
  232 + font-weight: bold;
  233 + font-family: PingFangSC-Medium;
  234 + font-size: 16px;
  235 + color: #333333;
  236 + letter-spacing: -0.3px;
  237 + line-height: 24px;
  238 + }
  239 + view{
  240 + span{
  241 + font-family: PingFangSC-Regular;
  242 + font-size: 14px;
  243 + color: #FF6B4A;
  244 + letter-spacing: -0.26px;
  245 + margin-right: 12px;
  246 + }
  247 + image{
  248 + width: 40rpx;
  249 + height: 36rpx;
  250 + }
  251 + }
  252 + }
  253 + .size2{
  254 + view{
  255 + display: inline-flex;
  256 + align-items: center;
  257 + justify-content: center; //字体居中
  258 + margin-right: 12px;
  259 + margin-bottom: 20px;
  260 + width: 136rpx;
  261 + height: 60rpx;
  262 + background: #F2F2F2;
  263 + border-radius: 2px;
  264 + font-family: PingFangSC-Regular;
  265 + font-size: 12px;
  266 + color: #666666;
  267 + }
  268 + view:hover{
  269 + color: #FF6B4A;
  270 + background: rgba(255,107,74,0.15);
  271 + }
  272 + }
  273 + .D3_list{
  274 + margin-bottom: 4px;
  275 + }
  276 + .D3_list>view{
  277 + display: flex;
  278 + align-content: center;
  279 + margin-bottom: 10px;
  280 + view{
  281 + margin-right: 10px;
  282 + }
  283 + }
  284 + .D3_list image{
  285 + width: 50px;
  286 + height: 25px;
  287 + margin-right: 6px;
  288 + }
  289 + .D3_list span{
  290 + margin-left: 6px;
  291 + margin-right: 5px;
  292 + font-family: 'PingFangSC-Regular';
  293 + }
  294 + .D3_list_jDu{
  295 + view{
  296 + font-family: PingFangSC-Regular;
  297 + font-size: 10px;
  298 + color: #999999;
  299 + letter-spacing: -0.19px;
  300 + }
  301 + }
  302 +}
  303 +.part{
  304 + .part_som{
  305 + display: grid;
  306 + justify-content: space-between;
  307 + grid-template-columns: repeat(4, 22%);
  308 + grid-row-gap: 12px;
  309 + margin-bottom: 14px;
  310 + view{
  311 + border: 1px solid #F2F2F2;
  312 + height: 72rpx;
  313 + image{
  314 + width: 100%;
  315 + height: 100%;
  316 + }
  317 + }
  318 + view:hover{
  319 + border: 1px solid #FF6B4A;
  320 + }
  321 + }
  322 +}
  323 +.buy{
  324 + height: 280rpx;
  325 + background: #FFFFFF ;
  326 + margin-top: 10px;
  327 + border-radius: 8px;
  328 + padding-top: 20px;
  329 + box-sizing: border-box;
  330 + margin-bottom: 20px;
  331 +}
  332 +.buy1{
  333 + font-family: PingFangSC-Medium;
  334 + font-size: 16px;
  335 + font-weight: bold;
  336 + color: #333333;
  337 + text-align: center;
  338 +}
  339 +.buy2{
  340 + font-family: PingFangSC-Regular;
  341 + font-size: 12px;
  342 + color: #999999;
  343 + text-align: center;
  344 + margin: 10px;
  345 +}
  346 +.buy3{
  347 + font-family: PingFangSC-Regular;
  348 + font-size: 16px;
  349 + display: flex;
  350 + justify-content: center;
  351 + margin-top: 14px;
  352 + view{
  353 + border-radius: 20px;
  354 + width: 240rpx;
  355 + height: 80rpx;
  356 + display: flex;
  357 + justify-content: center;
  358 + align-items: center;
  359 + }
  360 + .buy3_1{
  361 + margin-right: 20px;
  362 + background: rgba(255,107,74,0.15);
  363 + color: #FF6B4A ;
  364 + }
  365 + .buy3_2{
  366 + background: #FF6B4A;
  367 + color: #FFFFFF ;
  368 + }
  369 +}
  370 +.zhanwei{
  371 + background: #F2F2F2;
  372 + height: 120rpx;
  373 +}
  374 +.button{
  375 + position: fixed;
  376 + bottom: 0;
  377 + width:100%;
  378 + height: 112rpx;
  379 + background: #FF6B4A 100%;
  380 + view{
  381 + color: #FFFFFF;
  382 + height: 100%;
  383 + display: flex;
  384 + justify-content: center;
  385 + align-items: center;
  386 + font-family: PingFangSC-Regular;
  387 + font-size: 16px;
  388 + }
  389 +}
  390 +</style>
0 391 \ No newline at end of file
... ...
src/pages/detailStandard/detailStandard_sun.vue
Diff comments   View file @f1da24f
... ... @@ -0,0 +1,506 @@
  1 +<template>
  2 + <view class="container">
  3 + <view class="detail">
  4 + <view class="detail1"><image v-bind:src="detail.image"></image></view>
  5 + <view class="detail2">
  6 + <view class="detail2_name">{{detail.name}}</view>
  7 + <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view>
  8 + <view class="detail2_price"><span>￥{{detail.price}}</span></view>
  9 + </view>
  10 + </view>
  11 + <view class="choose">
  12 + <view class="colour">
  13 + <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala2.png"></image></view>
  14 + <view class="colour_exp">*黑色 BHL192345</view>
  15 + <view class="colour2">
  16 + <view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view>
  17 + </view>
  18 + <hr/>
  19 + </view>
  20 + <view class="colour">
  21 + <view class="colour1"><span>镜片颜色</span><image src="/static/img/detail/xiala2.png"></image></view>
  22 + <view class="colour_exp">*BL192345 粉紫色【限时打折】</view>
  23 + <view class="jp_colour2">
  24 + <view class="jp_colour" v-for="(colours) in jp" :key="colours.key"><image v-bind:src="colours.img"></image></view>
  25 + </view>
  26 + <hr/>
  27 + </view>
  28 + <view class="split">
  29 + <view class="split1">
  30 + <span>折射率</span>
  31 + <span class="split1_span">注：折射率越高，镜片越薄，看起来更美观。</span>
  32 + <image src="/static/img/detail/xiala2.png"></image>
  33 + </view>
  34 + <view class="split2">
  35 + <view class="split2_number">0-300度</view>
  36 + <view class="split2_choose"><view class="split2_tui">1.56（推荐）</view><view>1.60</view></view>
  37 + </view>
  38 + <view class="split2">
  39 + <view class="split2_number">300-1000度</view>
  40 + <view class="split2_choose"><view class="split2_tui">1.71（推荐）</view>
  41 + <view>1.67</view><view>1.74</view><view>1.80</view><view>1.71</view></view>
  42 + </view>
  43 + <hr/>
  44 + </view>
  45 + <view class="size">
  46 + <view class="size1">
  47 + <view class="size1_1">框架尺寸</view>
  48 + <view><span>+￥20</span><image src="/static/img/detail/xiala2.png"></image></view>
  49 + </view>
  50 + <view class="size2">
  51 + <view>通用</view>
  52 + <view>定制</view>
  53 + </view>
  54 + <!-- uni-sliper插件 -->
  55 + <view class="D3_list">
  56 + <view v-for="(item) in parameter" :key="item.key">
  57 + <view><image class="D3_image" v-bind:src = "item.img"></image></view>
  58 + <view class="D3_list_jDu">
  59 + <c-progress class="c-progress"
  60 + :percent="item.percent"
  61 + :show-slider="false" :width="190"
  62 + :standard="item.standard_l"
  63 + :stand_width="item.slength"
  64 + progressColor="#FF6B4A"
  65 + />
  66 + <view>{{item.standard}}</view>
  67 + </view>
  68 + </view>
  69 + <hr/>
  70 + </view>
  71 + </view>
  72 + <view class="part">
  73 + <view class="size1">
  74 + <view class="size1_1">配件</view>
  75 + <view><span>+￥0.00</span><image src="/static/img/detail/xiala2.png"></image></view>
  76 + </view>
  77 + <view class="colour_exp">*0290</view>
  78 + <view class="part_som">
  79 + <view v-for="(part) in part" :key="part.key"><image v-bind:src="part.img"></image></view>
  80 + </view>
  81 + </view>
  82 + </view>
  83 + <view class="buy">
  84 + <view class="buy1">选了镜框，想选镜片？</view>
  85 + <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view>
  86 + <view class="buy3">
  87 + <view class="buy3_1">暂时不选</view>
  88 + <view class="buy3_2">立即去选</view>
  89 + </view>
  90 + </view>
  91 + <view class="zhanwei"></view>
  92 + <view class="button"><view>立即结算</view></view>
  93 + </view>
  94 +</template>
  95 +<script>
  96 +import CProgress from '../../components/UniSliper/UniSliper'
  97 +
  98 +export default {
  99 + components: {
  100 + CProgress
  101 + },
  102 + data(){
  103 + return{
  104 + detail:{
  105 + image:'/static/img/detail/sun_glass.png',
  106 + name:'商品名称商品名称商品名称商品名称商品名称',
  107 + price: 180,
  108 + number: 1,
  109 + },
  110 + //框架颜色
  111 + colour:[
  112 + {key:0 ,img: '/static/img/detail/Kuang/s1.png'},
  113 + {key:1 ,img: '/static/img/detail/Kuang/s2.png'},
  114 + {key:2 ,img: '/static/img/detail/Kuang/s3.png'},
  115 + {key:3 ,img: '/static/img/detail/Kuang/s4.png'},
  116 + {key:4 ,img: '/static/img/detail/Kuang/s5.png'},
  117 + {key:5 ,img: '/static/img/detail/Kuang/s6.png'},
  118 + {key:6 ,img: '/static/img/detail/Kuang/s7.png'}
  119 + ],
  120 + //镜片颜色
  121 + jp:[
  122 + {key:0 ,img: '/static/img/detail/Kuang/sun_jp.png'},
  123 + {key:1 ,img: '/static/img/detail/Kuang/sun_jp.png'},
  124 + {key:2 ,img: '/static/img/detail/Kuang/sun_jp.png'},
  125 + {key:3 ,img: '/static/img/detail/Kuang/sun_jp.png'},
  126 + {key:4 ,img: '/static/img/detail/Kuang/sun_jp.png'},
  127 + {key:5 ,img: '/static/img/detail/Kuang/sun_jp.png'},
  128 + {key:6 ,img: '/static/img/detail/Kuang/sun_jp.png'},
  129 + {key:7 ,img: '/static/img/detail/Kuang/sun_jp.png'},
  130 + {key:8 ,img: '/static/img/detail/Kuang/sun_jp.png'}
  131 + ],
  132 + //规格参数
  133 + parameter:[
  134 + {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139,standard_l:1.4,percent:100},
  135 + {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51,standard_l:1,percent:50},
  136 + {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45,standard_l:1,percent:50},
  137 + {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19,standard_l:0.4,percent:30},
  138 + {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138,standard_l:1.6,percent:60},
  139 + ],
  140 + //配饰
  141 + part:[
  142 + {key: 0,img:'/static/img/detail/Kuang/g1.png'},
  143 + {key: 1,img:'/static/img/detail/Kuang/g1.png'},
  144 + {key: 2,img:'/static/img/detail/Kuang/g2.png'},
  145 + {key: 3,img:'/static/img/detail/Kuang/g1.png'},
  146 + {key: 4,img:'/static/img/detail/Kuang/g1.png'},
  147 + {key: 5,img:'/static/img/detail/Kuang/g3.png'},
  148 + {key: 6,img:'/static/img/detail/Kuang/g3.png'},
  149 + {key: 7,img:'/static/img/detail/Kuang/g2.png'},
  150 +
  151 + ],
  152 + }
  153 + }
  154 +}
  155 +</script>
  156 +
  157 +<style lang="scss">
  158 +.container{
  159 + min-height: 100vh;
  160 + background: #F2F2F2;
  161 + padding-top: 10px;
  162 + box-sizing: border-box;
  163 +}
  164 +hr{
  165 + border: none;
  166 + height: 1px;
  167 + background: #F2F2F2;
  168 + margin-top: 18px;
  169 +}
  170 +.detail{
  171 + height: 272rpx;
  172 + background: #FFFFFF;
  173 + border-radius: 8px;
  174 + padding: 16px;
  175 + box-sizing: border-box;
  176 + display: flex;
  177 + justify-content: space-between;
  178 + align-items: center;
  179 +}
  180 +.detail1{
  181 + height: 188rpx;
  182 + width: 188rpx;
  183 + image{
  184 + width: 100%;
  185 + height: 100%;
  186 + border-radius: 8px;
  187 + }
  188 +}
  189 +.detail2{
  190 + width: 68%;
  191 + view{
  192 + margin-bottom: 8px;
  193 + font-family: PingFangSC-Regular;
  194 + }
  195 + .detail2_name{
  196 + font-size: 14px;
  197 + color: #333333;
  198 + letter-spacing: -0.26px;
  199 + line-height: 18px;
  200 + }
  201 + .detail2_tui{
  202 + font-size: 10px;
  203 + color: #999999;
  204 + letter-spacing: -0.19px;
  205 + span{
  206 + margin-right: 10px;
  207 + }
  208 + }
  209 + .detail2_price{
  210 + font-size: 14px;
  211 + color: #FF6B4A;
  212 + letter-spacing: -0.26px;
  213 + }
  214 +}
  215 +.choose{
  216 + background: #FFFFFF;
  217 + padding: 16px;
  218 + box-sizing: border-box;
  219 + margin-top: 10px;
  220 + border-radius: 8px;
  221 + .colour1{
  222 + span{
  223 + font-family: PingFangSC-Medium;
  224 + font-size: 16px;
  225 + color: #333333;
  226 + letter-spacing: -0.3px;
  227 + text-align: justify;
  228 + line-height: 24px;
  229 + font-weight: bold;
  230 + }
  231 + image{
  232 + float: right;
  233 + width: 40rpx;
  234 + height: 36rpx;
  235 + }
  236 + }
  237 + .colour_exp{
  238 + font-family: PingFangSC-Regular;
  239 + font-size: 12px;
  240 + color: #666666;
  241 + letter-spacing: 0;
  242 + margin-top: 10px;
  243 + margin-bottom: 10px;
  244 + }
  245 + .colour2{
  246 + display: grid;
  247 + grid-template-columns: repeat(5, 17%);
  248 + justify-content: space-between ;
  249 + grid-row-gap: 10px;
  250 + margin-bottom: 14px;
  251 + view{
  252 + border: 1px solid #F2F2F2;
  253 + image{
  254 + width: 100%;
  255 + height: 100%;
  256 + }
  257 + }
  258 + view:hover{
  259 + border: 1px solid #FF6B4A;
  260 + }
  261 + }
  262 +}
  263 +.jp_colour2{
  264 + display: grid;
  265 + grid-template-columns: repeat(6, 12%);
  266 + grid-row-gap: 10px;
  267 + grid-column-gap: 6px;
  268 + margin-bottom: 14px;
  269 + view{
  270 + border: 1px solid #F2F2F2;
  271 + height: 80rpx;
  272 + image{
  273 + width: 100%;
  274 + height: 100%;
  275 + }
  276 + }
  277 + view:hover{
  278 + border: 1px solid #FF6B4A;
  279 + }
  280 +}
  281 +.split1{
  282 + span{
  283 + font-family: PingFangSC-Medium;
  284 + font-size: 16px;
  285 + color: #333333;
  286 + letter-spacing: -0.3px;
  287 + text-align: justify;
  288 + line-height: 24px;
  289 + font-weight: bold;
  290 + margin-right:8px;
  291 + }
  292 + .split1_span{
  293 + font-family: PingFangSC-Regular;
  294 + font-size: 10px;
  295 + color: #999999;
  296 + letter-spacing: -0.3px;
  297 + font-weight:normal;
  298 + }
  299 + image{
  300 + float: right;
  301 + width: 40rpx;
  302 + height: 36rpx;
  303 + }
  304 +}
  305 +.split2{
  306 + margin-bottom: 12px;
  307 + .split2_number{
  308 + font-family: PingFangSC-Regular;
  309 + font-size: 10px;
  310 + color: #999999;
  311 + letter-spacing: -0.19px;
  312 + margin-bottom: 6px;
  313 + }
  314 + .split2_choose{
  315 + display: flex;
  316 + view{
  317 + display: flex;
  318 + justify-content: center;
  319 + align-items: center;
  320 + font-family: PingFangSC-Regular;
  321 + font-size: 12px;
  322 + color: #666666;
  323 + background: #F2F2F2;
  324 + width: 100rpx;
  325 + height: 60rpx;
  326 + border-radius: 2px;
  327 + margin-right: 10px;
  328 + }
  329 + view:hover{
  330 + color: #FF6B4A;
  331 + background: rgba(255,107,74,0.15);
  332 + }
  333 + .split2_tui{
  334 + width: 186rpx;
  335 + height: 60rpx;
  336 + }
  337 + }
  338 +
  339 +}
  340 +.size,.part{
  341 + margin-top:14px;
  342 + .size1{
  343 + display: flex;
  344 + justify-content: space-between;
  345 + margin-bottom: 10px;
  346 + .size1_1{
  347 + font-weight: bold;
  348 + font-family: PingFangSC-Medium;
  349 + font-size: 16px;
  350 + color: #333333;
  351 + letter-spacing: -0.3px;
  352 + line-height: 24px;
  353 + }
  354 + view{
  355 + span{
  356 + font-family: PingFangSC-Regular;
  357 + font-size: 14px;
  358 + color: #FF6B4A;
  359 + letter-spacing: -0.26px;
  360 + margin-right: 12px;
  361 + }
  362 + image{
  363 + width: 40rpx;
  364 + height: 36rpx;
  365 + }
  366 + }
  367 + }
  368 + .size2{
  369 + view{
  370 + display: inline-flex;
  371 + align-items: center;
  372 + justify-content: center; //字体居中
  373 + margin-right: 12px;
  374 + margin-bottom: 20px;
  375 + width: 136rpx;
  376 + height: 60rpx;
  377 + background: #F2F2F2;
  378 + border-radius: 2px;
  379 + font-family: PingFangSC-Regular;
  380 + font-size: 12px;
  381 + color: #666666;
  382 + }
  383 + view:hover{
  384 + color: #FF6B4A;
  385 + background: rgba(255,107,74,0.15);
  386 + }
  387 + }
  388 + .D3_list{
  389 + margin-bottom: 4px;
  390 + }
  391 + .D3_list>view{
  392 + display: flex;
  393 + align-content: center;
  394 + margin-bottom: 10px;
  395 + view{
  396 + margin-right: 10px;
  397 + }
  398 + }
  399 + .D3_list image{
  400 + width: 50px;
  401 + height: 25px;
  402 + margin-right: 6px;
  403 + }
  404 + .D3_list span{
  405 + margin-left: 6px;
  406 + margin-right: 5px;
  407 + font-family: 'PingFangSC-Regular';
  408 + }
  409 + .D3_list_jDu{
  410 + view{
  411 + font-family: PingFangSC-Regular;
  412 + font-size: 10px;
  413 + color: #999999;
  414 + letter-spacing: -0.19px;
  415 + }
  416 + }
  417 +}
  418 +.part{
  419 + .part_som{
  420 + display: grid;
  421 + justify-content: space-between;
  422 + grid-template-columns: repeat(4, 22%);
  423 + grid-row-gap: 12px;
  424 + margin-bottom: 14px;
  425 + view{
  426 + border: 1px solid #F2F2F2;
  427 + height: 72rpx;
  428 + image{
  429 + width: 100%;
  430 + height: 100%;
  431 + }
  432 + }
  433 + view:hover{
  434 + border: 1px solid #FF6B4A;
  435 + }
  436 + }
  437 +}
  438 +.buy{
  439 + height: 280rpx;
  440 + background: #FFFFFF ;
  441 + margin-top: 10px;
  442 + border-radius: 8px;
  443 + padding-top: 20px;
  444 + box-sizing: border-box;
  445 + margin-bottom: 20px;
  446 +}
  447 +.buy1{
  448 + font-family: PingFangSC-Medium;
  449 + font-size: 16px;
  450 + font-weight: bold;
  451 + color: #333333;
  452 + text-align: center;
  453 +}
  454 +.buy2{
  455 + font-family: PingFangSC-Regular;
  456 + font-size: 12px;
  457 + color: #999999;
  458 + text-align: center;
  459 + margin: 10px;
  460 +}
  461 +.buy3{
  462 + font-family: PingFangSC-Regular;
  463 + font-size: 16px;
  464 + display: flex;
  465 + justify-content: center;
  466 + margin-top: 14px;
  467 + view{
  468 + border-radius: 20px;
  469 + width: 240rpx;
  470 + height: 80rpx;
  471 + display: flex;
  472 + justify-content: center;
  473 + align-items: center;
  474 + }
  475 + .buy3_1{
  476 + margin-right: 20px;
  477 + background: rgba(255,107,74,0.15);
  478 + color: #FF6B4A ;
  479 + }
  480 + .buy3_2{
  481 + background: #FF6B4A;
  482 + color: #FFFFFF ;
  483 + }
  484 +}
  485 +.zhanwei{
  486 + background: #F2F2F2;
  487 + height: 120rpx;
  488 +}
  489 +.button{
  490 + position: fixed;
  491 + bottom: 0;
  492 + width:100%;
  493 + height: 112rpx;
  494 + background: #FF6B4A 100%;
  495 + view{
  496 + color: #FFFFFF;
  497 + height: 100%;
  498 + display: flex;
  499 + justify-content: center;
  500 + align-items: center;
  501 + font-family: PingFangSC-Regular;
  502 + font-size: 16px;
  503 + }
  504 +}
  505 +
  506 +</style>
0 507 \ No newline at end of file
... ...
src/pages/detailsChoiceArgs/compoents/MyCollapse.vue
Diff comments   View file @f1da24f
... ... @@ -0,0 +1,235 @@
  1 +<template>
  2 + <!-- 折叠框 -->
  3 + <view class="myCollapse">
  4 + <view class="head">
  5 + <view>{{title}}</view>
  6 + <view v-if="title==='折射率'" class="headMid">注：折射率越高，镜片越薄，看着更美观。</view>
  7 + <view class="headRighted" v-if="isOpen" @click="myCollapseChange(isOpen)"></view>
  8 + <view class="headRight" v-else @click="myCollapseChange(isOpen)" ></view>
  9 + </view>
  10 + <view class="body">
  11 +
  12 + <block v-if="isOpen">
  13 +
  14 + <view style="background-color: #FFFFFF;" class="funBox">
  15 + <block v-if="title==='镜片种类'">
  16 + <view class="noRange">
  17 + <block v-for="(item) in funList" :key="item.key">
  18 + <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'"
  19 + @click="choice(item.key-1,item.isChioce)">{{item.name}}</view>
  20 + </block>
  21 + </view>
  22 + <view class="noRange">
  23 + <block v-for="(item,index) in funList2" :key="item.key">
  24 + <view v-bind:class="item.isChioce?'boxChoiced-C':'boxChoice-C'"
  25 + :style="colorList[index]" @click="choice2(index,item.key-1,item.isChioce)"></view>
  26 + </block>
  27 + </view>
  28 + </block>
  29 + <block v-else>
  30 + <view class="range" v-for="(item) in funList" :key="item.key">{{item.range}}</view>
  31 + <view class="noRange">
  32 + <block v-for="(item) in funList" :key="item.key">
  33 + <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'"
  34 + @click="choice(item.key-1,item.isChioce)">{{item.name}}</view>
  35 + </block>
  36 + </view>
  37 +
  38 + <view class="range" v-for="(item) in funList2" :key="item.key">{{item.range}}</view>
  39 + <view class="noRange" style="max-width: 624rpx">
  40 + <block v-for="(item,index) in funList2" :key="item.key">
  41 + <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'"
  42 + @click="choice2(index,item.key-1,item.isChioce)">{{item.name}}</view>
  43 + </block>
  44 + </view>
  45 + </block>
  46 + </view>
  47 + </block>
  48 +
  49 + <block v-else>
  50 + *<block v-for="(item,index) in funContent" :key="index">
  51 + <text v-if="item!==null">{{item}}</text>
  52 + </block>
  53 + </block>
  54 + </view>
  55 + </view>
  56 +
  57 +</template>
  58 +
  59 +<script>
  60 + export default {
  61 + props:{
  62 + isOpenProps:{
  63 + // 是否展开，默认 true
  64 + type: Boolean,
  65 + default: true
  66 + },
  67 + funListProp:{
  68 + "name":String,
  69 + "isChioce": Number,
  70 + "key":Number
  71 + },
  72 + funList2Prop:{
  73 + type:Array,
  74 + }
  75 + ,
  76 + funContentProp: {
  77 + type: Array
  78 + },
  79 + title:{
  80 + type: String,
  81 + default: ''
  82 + }
  83 + },
  84 + data() {
  85 + return {
  86 + isOpen:this.isOpenProps,
  87 + // 颜色数组要与传入的值手动相同
  88 + colorList:[
  89 + "background-image: linear-gradient(180deg, #ECEAEA 1%, #f2f2f2 100%);",
  90 + "background-image: linear-gradient(180deg, #ECEAEA 1%, #8D8C8C 100%);",
  91 + "background-image: linear-gradient(180deg, #AEA8A8 1%, #624B3F 100%);",
  92 + "background-image: linear-gradient(180deg, #AEA096 1%, #5E3521 100%);",
  93 + "background-image: linear-gradient(180deg, #6F6864 1%, #352B26 100%);"
  94 + ],
  95 + funList: this.funListProp,
  96 + funList2: this.funList2Prop,
  97 + funContent: this.funContentProp
  98 + };
  99 + },
  100 +
  101 + methods:{
  102 + myCollapseChange(isopen){
  103 + this.isOpen = !isopen
  104 + },
  105 + choice(index,isChoice){
  106 + this.funList[index].isChioce = !isChoice
  107 + if(!isChoice){
  108 + this.funContent[index] = this.funList[index].name
  109 + }
  110 + else{
  111 + this.funContent[index] = ''
  112 + }
  113 + },
  114 + choice2(index,conIndex,isChoice){
  115 + this.funList2[index].isChioce = !isChoice
  116 + if(!isChoice){
  117 + this.funContent[conIndex] = this.funList2[index].name
  118 + }
  119 + else{
  120 + this.funContent[conIndex] = ''
  121 + }
  122 + }
  123 + }
  124 + }
  125 +</script>
  126 +
  127 +<style lang="scss">
  128 + .myCollapse{
  129 + width: 100%;
  130 + padding-bottom: 28rpx;
  131 + margin-top: 7px;
  132 + border-bottom: 1px solid #E9E9E9;
  133 + .head{
  134 + display: flex;
  135 + justify-content: space-between;
  136 + height: 24px;
  137 + // font-family: PingFangSC-Medium;
  138 + font-size: 16px;
  139 + color: #333333;
  140 + letter-spacing: -0.3px;
  141 + text-align: justify;
  142 + line-height: 24px;
  143 + margin-bottom: 18rpx;
  144 + .headRighted{
  145 + width: 0;
  146 + height: 0;
  147 + border-left: 4px solid transparent;
  148 + border-right: 4px solid transparent;
  149 + border-bottom: 4px solid #CFCFCF;
  150 + transform: scaleY(-1);
  151 + margin-top: 10px;
  152 + }
  153 + .headMid{
  154 + // font-family: PingFangSC-Regular;
  155 + font-size: 10px;
  156 + color: #999999;
  157 + letter-spacing: -0.19px;
  158 + margin-left: -120rpx;
  159 + }
  160 + .headRight{
  161 + width: 0;
  162 + height: 0;
  163 + border-left: 4px solid transparent;
  164 + border-right: 4px solid transparent;
  165 + border-bottom: 4px solid #CFCFCF;
  166 + margin-top: 10px;
  167 + }
  168 + }
  169 + .body{
  170 + // font-family: PingFangSC-Regular;
  171 + font-size: 12px;
  172 + color: #666666;
  173 + letter-spacing: 0;
  174 + display: flex;
  175 + flex-wrap: wrap;
  176 + text{
  177 + padding-left: 4px;
  178 + }
  179 + }
  180 + }
  181 + .funBox {
  182 + // display: flex;
  183 + width: 100%;
  184 + // flex-wrap: wrap;
  185 + // max-width: 624rpx;
  186 + .range{
  187 + // font-family: PingFangSC-Regular;
  188 + font-size: 10px;
  189 + color: #999999;
  190 + letter-spacing: -0.19px;
  191 + margin-bottom: 5px;
  192 + }
  193 + .noRange{
  194 + display: flex;
  195 + flex-wrap: wrap;
  196 + // max-width: 624rpx;
  197 + // margin-bottom: 28rpx;
  198 + .boxChoiced,.boxChoice{
  199 + height: 60rpx;
  200 + border-radius: 4rpx;
  201 + // font-family: PingFangSC-Regular;
  202 + font-size: 12px;
  203 + letter-spacing: 0;
  204 + line-height: 60rpx;
  205 + box-sizing: border-box;
  206 + padding: 0 20rpx;
  207 + margin-right: 20rpx;
  208 + margin-bottom: 13rpx;
  209 + }
  210 + .boxChoiced{
  211 + background: rgba(255,107,74,0.15);
  212 + color: #FF6B4A;
  213 + }
  214 + .boxChoice{
  215 + background: #F2F2F2;
  216 + color: #666666;
  217 + }
  218 + .boxChoiced-C,.boxChoice-C{
  219 + width: 64rpx;
  220 + height: 64rpx;
  221 + border-radius: 32rpx;
  222 + margin-right: 8px;
  223 + }
  224 + .boxChoiced-C{
  225 + opacity: 0.7;
  226 + border: 1px solid #FF6B4A;
  227 + }
  228 + .boxChoice-C{
  229 + opacity: 0.7;
  230 + border: 1px solid #FFFFFF;
  231 + }
  232 + }
  233 +
  234 + }
  235 +</style>
... ...
src/pages/detailsChoiceArgs/detailsChoiceArgs.vue
Diff comments   View file @f1da24f
... ... @@ -0,0 +1,571 @@
  1 +<template>
  2 + <view class="content">
  3 + <view class="goods-info">
  4 + <image src="../../static/myorder-paying-pic.png"></image>
  5 + <view class="box-right">
  6 + <text class="p1">镜片名称型号功能镜片名称型镜片名称型号功能非球面…</text>
  7 + <text class="p2">支持7天无理由退货 顺丰发货</text>
  8 + <view class="priceBox">
  9 + <view class="price">￥{{price*count}}</view>
  10 + <view class="counter">
  11 + <view class="btn" disabled="this.disabled" @click="counter(false)">-</view>
  12 + <text>{{count}}</text>
  13 + <view class="btn" @click="counter(true)">+</view>
  14 + </view>
  15 + </view>
  16 + </view>
  17 + </view>
  18 + <view class="goods-data">
  19 + <!-- 实用功能折叠框 -->
  20 + <MyCollapse :isOpenProps="funIsOpen" :funListProp="funList" :funContentProp="funContent" title="实用功能"></MyCollapse>
  21 + <MyCollapse :isOpenProps="kindIsOpen" :funListProp="kindList1" :funList2Prop="kindList2" :funContentProp="kindContent" title="镜片种类"></MyCollapse>
  22 + <MyCollapse :isOpenProps="maIsOpen" :funListProp="maList1" :funList2Prop="maList2" :funContentProp="maContent" title="材质选择"></MyCollapse>
  23 + <MyCollapse :isOpenProps="reIsOpen" :funListProp="reList1" :funList2Prop="reList2" :funContentProp="reContent" title="折射率"></MyCollapse>
  24 +
  25 + <view class="opCollapse">
  26 + <view class="head">
  27 + <view v-if="!opIsOpen">填写验光数据</view>
  28 + <view v-else></view>
  29 + <view class="headRighted" v-if="opIsOpen" @click="myCollapseChange(opIsOpen)"></view>
  30 + <view class="headRight" v-else @click="myCollapseChange(opIsOpen)" ></view>
  31 + </view>
  32 + <view class="body">
  33 + <template v-if="opIsOpen">
  34 +
  35 + <view class="goods-form">
  36 + <text class="p1">填写验光数据</text>
  37 + <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
  38 + <view class="picker" >
  39 + <view class="picker-choice">
  40 + <view class="choice-left">
  41 + <text class="p11">{{pickerInfoList[0].nameC}}</text>
  42 + <text class="p12">{{pickerInfoList[0].nameE}}</text>
  43 + </view>
  44 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  45 + <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
  46 + <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
  47 + <image src="../../static/detail-tabicon.png" ></image>
  48 + </picker>
  49 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  50 + <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
  51 + <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
  52 + <image src="../../static/detail-tabicon.png" ></image>
  53 + </picker>
  54 + </view>
  55 + </view>
  56 + <view class="picker" >
  57 + <view class="picker-choice">
  58 + <view class="choice-left">
  59 + <text class="p11">{{pickerInfoList[1].nameC}}</text>
  60 + <text class="p12">{{pickerInfoList[1].nameE}}</text>
  61 + </view>
  62 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  63 + <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
  64 + <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
  65 + <image src="../../static/detail-tabicon.png" ></image>
  66 + </picker>
  67 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  68 + <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
  69 + <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
  70 + <image src="../../static/detail-tabicon.png" ></image>
  71 + </picker>
  72 + </view>
  73 + </view>
  74 + <view class="picker" >
  75 + <view class="picker-choice">
  76 + <view class="choice-left">
  77 + <text class="p11">{{pickerInfoList[2].nameC}}</text>
  78 + <text class="p12">{{pickerInfoList[2].nameE}}</text>
  79 + </view>
  80 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  81 + <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
  82 + <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
  83 + <image src="../../static/detail-tabicon.png" ></image>
  84 + </picker>
  85 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  86 + <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
  87 + <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
  88 + <image src="../../static/detail-tabicon.png" ></image>
  89 + </picker>
  90 + </view>
  91 + </view>
  92 + <view class="picker" >
  93 + <view class="picker-choice">
  94 + <view class="choice-left">
  95 + <text class="p11">{{pickerInfoList[3].nameC}}</text>
  96 + <text class="p12">{{pickerInfoList[3].nameE}}</text>
  97 + </view>
  98 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  99 + <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
  100 + <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
  101 + <image src="../../static/detail-tabicon.png" ></image>
  102 + </picker>
  103 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  104 + <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
  105 + <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
  106 + <image src="../../static/detail-tabicon.png" ></image>
  107 + </picker>
  108 + </view>
  109 + </view>
  110 + <view class="picker" >
  111 + <view class="picker-choice">
  112 + <view class="choice-left">
  113 + <text class="p11">{{pickerInfoList[4].nameC}}</text>
  114 + </view>
  115 + <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
  116 + <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
  117 + <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">
  118 + <image src="../../static/detail-tabicon.png" ></image>
  119 + </picker>
  120 + <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
  121 + <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
  122 + <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">
  123 + <image src="../../static/detail-tabicon.png" ></image>
  124 + </picker>
  125 + <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
  126 + <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
  127 + <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">
  128 + <image src="../../static/detail-tabicon.png" ></image>
  129 + </picker>
  130 + </view>
  131 + </view>
  132 + <view class="confirm">
  133 + <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>
  134 + <text>确认以上输入信息来源于我的验光数据!</text>
  135 + </view>
  136 + </view>
  137 +
  138 + </template>
  139 + <template v-else>
  140 + <view v-for="item in pickerInfoList" :key="item.key" class="bodyBox">
  141 + <template v-if="item.nameC==='验光日期'">
  142 + <text class="names">{{item.nameC}}</text>
  143 + <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
  144 + <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
  145 + <text>{{item.nameArray3[item.nameIndex2]}}日</text>
  146 + </template>
  147 + <template v-else>
  148 + <template v-if="item.nameC==='度数'">
  149 + <text style="display: inline;">*</text>
  150 + </template>
  151 +
  152 + <text class="names">{{item.nameC}}</text>
  153 + <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
  154 + <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text>
  155 + </template>
  156 + </view>
  157 + </template>
  158 + </view>
  159 + </view>
  160 +
  161 + </view>
  162 + <view class="submit">立即结算</view>
  163 + </view>
  164 +</template>
  165 +
  166 +<script>
  167 + import MyCollapse from './compoents/MyCollapse.vue'
  168 + export default {
  169 + components: {
  170 + MyCollapse
  171 + },
  172 + data() {
  173 + return {
  174 + count:1,
  175 + disabled:false,
  176 + price:180,
  177 + // 实用功能参数
  178 + funIsOpen:true, // 默认myCollapse开启
  179 + funList: [
  180 + {"name":"防紫外线","isChioce": false,"key":1},
  181 + {"name":"防蓝光","isChioce": false,"key":2},
  182 + {"name":"智能变色","isChioce": false,"key":3},
  183 + {"name":"易清洁","isChioce": false,"key":4},
  184 + {"name":"防辐射","isChioce": false,"key":5},
  185 + {"name":"抗疲劳","isChioce": false,"key":6},
  186 + ],
  187 + funContent:[],
  188 +
  189 + // 镜片种类参数
  190 + kindIsOpen:true,
  191 + kindList1: [
  192 + {"name":"染色","isChioce":false,key:1},
  193 + {"name":"渐变","isChioce":false,key:2},
  194 + ],
  195 + kindList2: [
  196 + {"name":"JB234759","isChioce":false,key:3},
  197 + {"name":"JB234759","isChioce":false,key:4},
  198 + {"name":"JB234759","isChioce":false,key:5},
  199 + {"name":"JB234759","isChioce":false,key:6},
  200 + {"name":"JB234759","isChioce":false,key:7},
  201 + ],
  202 + kindContent:[],
  203 + // 材质选择
  204 + maIsOpen:true,
  205 + maList1: [
  206 + {"name":"树脂镜片","isChioce":false,key:1,"range":"0-300度","isRange":true},
  207 + {"name":"特殊镜片","isChioce":false,key:2},
  208 + ],
  209 + maList2: [
  210 + {"name":"玻璃镜片","isChioce":false,key:3,"range":"300-1000度","isRange":true},
  211 + {"name":"玻璃镜片","isChioce":false,key:4},
  212 + ],
  213 + maContent:[],
  214 + // 折射率参数
  215 + reIsOpen:true,
  216 + reList1: [
  217 + {"name":"1.56（推荐）","isChioce":false,key:1,"range":"0-300度","isRange":true},
  218 + {"name":"1.60","isChioce":false,key:2},
  219 + ],
  220 + reList2: [
  221 + {"name":"1.71（推荐）","isChioce":false,key:3,"range":"300-1000度","isRange":true},
  222 + {"name":"1.67","isChioce":false,key:4},
  223 + {"name":"1.71","isChioce":false,key:5},
  224 + {"name":"1.74","isChioce":false,key:6},
  225 + ],
  226 + reContent:[],
  227 + // 验光参数
  228 + opIsOpen:true,
  229 + tablist: {
  230 + // read: true,
  231 + // seeLong: false,
  232 + confirm: false
  233 + },
  234 + tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
  235 + // 度数相关数据
  236 + pickerInfoList:[
  237 + {nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0},
  238 + {nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1},
  239 + {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2},
  240 + {nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3},
  241 + {nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0}
  242 + ],
  243 +
  244 + }
  245 + },
  246 + methods: {
  247 + counter(isadd){
  248 + if(isadd){
  249 + this.count++
  250 + }else{
  251 + this.count <= 1? this.disabled = true:this.count--
  252 + }
  253 + },
  254 + myCollapseChange(isopen){
  255 + // console.log(isopen)
  256 + this.opIsOpen = !isopen
  257 + },
  258 + changeConfirm() {
  259 + this.tablist.confirm = !this.tablist.confirm
  260 + },
  261 +
  262 + bindPickerChange01: function(e) {
  263 + this.pickerInfoList[0].nameIndex1 = e.target.value
  264 + },
  265 + bindPickerChange02: function(e) {
  266 + this.pickerInfoList[0].nameIndex2 = e.target.value
  267 + },
  268 +
  269 + bindPickerChange11: function(e) {
  270 + this.pickerInfoList[1].nameIndex1 = e.target.value
  271 + },
  272 + bindPickerChange12: function(e) {
  273 + this.pickerInfoList[1].nameIndex2 = e.target.value
  274 + },
  275 +
  276 + bindPickerChange21: function(e) {
  277 + this.pickerInfoList[2].nameIndex1 = e.target.value
  278 + },
  279 + bindPickerChange22: function(e) {
  280 + this.pickerInfoList[2].nameIndex2 = e.target.value
  281 + },
  282 +
  283 + bindPickerChange31: function(e) {
  284 + this.pickerInfoList[3].nameIndex1 = e.target.value
  285 + },
  286 + bindPickerChange32: function(e) {
  287 + this.pickerInfoList[3].nameIndex2 = e.target.value
  288 + },
  289 +
  290 + bindPickerChange41: function(e) {
  291 + this.pickerInfoList[4].nameIndex1 = e.target.value
  292 + },
  293 + bindPickerChange42: function(e) {
  294 + this.pickerInfoList[4].nameIndex2 = e.target.value
  295 + },
  296 + bindPickerChange43: function(e) {
  297 + this.pickerInfoList[4].nameIndex3 = e.target.value
  298 + },
  299 + }
  300 + }
  301 +</script>
  302 +
  303 +<style lang="scss" scoped>
  304 + .content{
  305 + width: 100%;
  306 + background-color: #F2F2F2;
  307 + display: flex;
  308 + flex-direction: column;
  309 + align-items: center;
  310 + }
  311 +
  312 + .goods-info{
  313 + width: 100%;
  314 + height: 272rpx;
  315 + box-sizing: border-box;
  316 + padding: 40rpx 40rpx 36rpx 36rpx;
  317 + margin: 36rpx 0 18rpx 0;
  318 + // margin-bottom: -18rpx;
  319 + // margin-top: -36rpx;
  320 + background: #FFFFFF;
  321 + border-radius: 16rpx;
  322 + display: flex;
  323 + image{
  324 + width: 94px;
  325 + height: 94px;
  326 + margin-right: 28rpx;
  327 + }
  328 + .box-right{
  329 + width: 458rpx;
  330 + display: flex;
  331 + flex-direction: column;
  332 + align-items: flex-start;
  333 + justify-content: space-between;
  334 + .p1 {
  335 + // font-family: PingFangSC-Regular;
  336 + font-size: 14px;
  337 + color: #333333;
  338 + letter-spacing: -0.26px;
  339 + text-align: justify;
  340 + line-height: 18px;
  341 + }
  342 + .p2 {
  343 + // font-family: PingFangSC-Regular;
  344 + font-size: 10px;
  345 + color: #999999;
  346 + letter-spacing: -0.19px;
  347 + margin-top: -20rpx;
  348 + }
  349 + .priceBox{
  350 + display: flex;
  351 + flex-direction: row;
  352 + justify-content: space-between;
  353 + width: 100%;
  354 + .price{
  355 + color: #FF6B4A;
  356 + font-size: 28rpx;
  357 + }
  358 + .counter{
  359 + display: flex;
  360 + flex-direction: row;
  361 + justify-content: space-between;
  362 + font-size: 28rpx;
  363 + color: #333333;
  364 + width: 122rpx;
  365 + .btn{
  366 + display: flex;
  367 + justify-content: center;
  368 + line-height: 32rpx;
  369 + height: 32rpx;
  370 + width: 32rpx;
  371 + background-color: #F2F2F2;
  372 + color: #CFCFCF;
  373 + }
  374 + }
  375 + }
  376 + }
  377 + }
  378 +
  379 + .goods-data{
  380 + width: 100%;
  381 + box-sizing: border-box;
  382 + padding: 37rpx 40rpx 0 40rpx;
  383 + background: #FFFFFF;
  384 + border-radius: 12rpx;
  385 + margin-bottom: 92px;
  386 + .opCollapse{
  387 + width: 100%;
  388 + padding-bottom: 28rpx;
  389 + margin-top: 7px;
  390 + border-bottom: 1px solid #E9E9E9;
  391 + .head{
  392 + display: flex;
  393 + justify-content: space-between;
  394 + height: 24px;
  395 + // font-family: PingFangSC-Medium;
  396 + font-size: 16px;
  397 + color: #333333;
  398 + letter-spacing: -0.3px;
  399 + text-align: justify;
  400 + line-height: 24px;
  401 + margin-bottom: 18rpx;
  402 + .headRighted{
  403 + width: 0;
  404 + height: 0;
  405 + border-left: 4px solid transparent;
  406 + border-right: 4px solid transparent;
  407 + border-bottom: 4px solid #CFCFCF;
  408 + transform: scaleY(-1);
  409 + margin-top: 10px;
  410 + }
  411 + .headMid{
  412 + // font-family: PingFangSC-Regular;
  413 + font-size: 10px;
  414 + color: #999999;
  415 + letter-spacing: -0.19px;
  416 + margin-left: -120rpx;
  417 + }
  418 + .headRight{
  419 + width: 0;
  420 + height: 0;
  421 + border-left: 4px solid transparent;
  422 + border-right: 4px solid transparent;
  423 + border-bottom: 4px solid #CFCFCF;
  424 + margin-top: 10px;
  425 + }
  426 + }
  427 + .body{
  428 + // font-family: PingFangSC-Regular;
  429 + font-size: 12px;
  430 + color: #666666;
  431 + letter-spacing: 0;
  432 + .bodyBox{
  433 + margin-top: 15px;
  434 + .names{
  435 + // font-family: PingFangSC-Regular;
  436 + font-size: 12px;
  437 + color: #151515;
  438 + letter-spacing: 0;
  439 + text-align: justify;
  440 + line-height: 17px;
  441 + margin-left: 5px;
  442 + margin-right: 10px;
  443 + }
  444 + text{
  445 + // font-family: PingFangSC-Regular;
  446 + font-size: 12px;
  447 + color: #666666;
  448 + letter-spacing: 0;
  449 + text-align: justify;
  450 + }
  451 + }
  452 +
  453 + }
  454 + }
  455 +
  456 + }
  457 +
  458 + .goods-form {
  459 + display: flex;
  460 + flex-direction: column;
  461 + align-items: center;
  462 + justify-content: center;
  463 + background-color: #fff;
  464 + width: 100%;
  465 +
  466 + .p1 {
  467 + font-size: 16px;
  468 + color: #333333;
  469 + letter-spacing: -0.3px;
  470 + text-align: justify;
  471 + line-height: 24px;
  472 + margin: 4px 0;
  473 +
  474 + }
  475 + .p2 {
  476 + font-size: 12px;
  477 + color: #999999;
  478 + letter-spacing: -0.23px;
  479 + margin-bottom: 18rpx;
  480 + }
  481 + image{
  482 + width: 28rpx;
  483 + height: 26rpx;
  484 + }
  485 + .confirm {
  486 + display: flex;
  487 + align-items: center;
  488 + font-size: 12px;
  489 + color: #666666;
  490 + letter-spacing: -0.23px;
  491 + width: 684rpx;
  492 + image{
  493 + margin-right:25rpx;
  494 + }
  495 + }
  496 + .picker{
  497 + display: flex;
  498 + flex-direction: column;
  499 + justify-content: center;
  500 + align-items: center;
  501 + width: 100%;
  502 + image{
  503 + width: 10px;
  504 + height: 10px;
  505 + margin-right: 5px;
  506 + }
  507 + .picker-choice{
  508 + display: flex;
  509 + width: 684rpx;
  510 + align-items: center;
  511 + margin-bottom: 40rpx;
  512 + .choice-left{
  513 + width: 210rpx;
  514 + .p11 {
  515 + font-size: 14px;
  516 + color: #333333;
  517 + letter-spacing: -0.26px;
  518 + text-align: justify;
  519 + line-height: 24px;
  520 + // margin-right: 10px;
  521 + }
  522 + .p12 {
  523 + font-size: 10px;
  524 + color: #3F3F3F;
  525 + letter-spacing: -0.19px;
  526 + text-align: justify;
  527 + line-height: 24px;
  528 + }
  529 +
  530 +
  531 + }
  532 + .p13 {
  533 + font-size: 10px;
  534 + color: #999999;
  535 + letter-spacing: -0.19px;
  536 + margin-right: 10px;
  537 + }
  538 + .p13-date {
  539 + font-size: 10px;
  540 + color: #999999;
  541 + letter-spacing: -0.19px;
  542 + margin-right: 5px;
  543 + }
  544 + .p14 {
  545 + font-size: 14px;
  546 + color: #666666;
  547 + letter-spacing: -0.26px;
  548 + text-align: center;
  549 + width: 124rpx;
  550 + border-bottom: 1px solid #CFCFCF;
  551 + }
  552 +
  553 + }
  554 + }
  555 + }
  556 +
  557 + .submit{
  558 + width: 100%;
  559 + height: 112rpx;
  560 + background: #FF6B4A;
  561 + position: fixed;
  562 + bottom: 0;
  563 + text-align: center;
  564 + line-height: 112rpx;
  565 + // font-family: PingFangSC-Regular;
  566 + font-size: 16px;
  567 + color: #FFFFFF;
  568 + letter-spacing: -0.3px;
  569 + }
  570 +
  571 +</style>
... ...
src/pages/frameDetail/frameDetail.vue
Diff comments   View file @f1da24f
... ... @@ -11,17 +11,17 @@
11 11 <view class="D1_name"><span class="D1_name1">{{name}}</span><span class="D1_number">{{number}}购买过</span></view>
12 12 <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
13 13 </view>
14   - <view class="D2" v-if="goodType === 0 || goodType === 3">
  14 + <view class="D2" v-if="updateGoodType == 2 || updateGoodType == 4">
15 15 <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
16 16 <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view>
17 17 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
18 18 </view>
19   - <view class="D2" v-if="goodType === 1">
  19 + <view class="D2" v-if="updateGoodType == 1">
20 20 <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
21 21 <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view>
22 22 <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view>
23 23 </view>
24   - <view class="D2" v-if="goodType === 2">
  24 + <view class="D2" v-if="updateGoodType == 3">
25 25 <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
26 26 <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view>
27 27 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
... ... @@ -163,7 +163,7 @@ export default {
163 163 data(){
164 164 return {
165 165 name:'商品名称',
166   - goodType:1,
  166 + goodType:2,
167 167 price: 120,
168 168 number: 391,
169 169 screenItems: [
... ... @@ -212,14 +212,53 @@ export default {
212 212 }
213 213 }
214 214 },
  215 + onLoad:function(option){
  216 + this.goodType = option.goodType
  217 + console.log(this.updateGoodType)
  218 + },
  219 + computed:{
  220 + updateGoodType(){
  221 + return this.goodType
  222 + }
  223 + },
215 224 methods:{
216 225 goPerchase(){
217   - uni.navigateTo({
218   - url: '../purchaseLenses/purchaseLenses',
219   - success: res => {},
220   - fail: () => {},
221   - complete: () => {}
222   - });
  226 + switch(this.updateGoodType){
  227 + case '1':
  228 + uni.navigateTo({
  229 + url: '../detailsChoiceArgs/detailsChoiceArgs',
  230 + success: res => {},
  231 + fail: () => {},
  232 + complete: () => {}
  233 + });
  234 + break;
  235 + case '2':
  236 + uni.navigateTo({
  237 + url: `../detailStandard/detailStandard_k`,
  238 + success: res => {},
  239 + fail: () => {},
  240 + complete: () => {}
  241 + });
  242 + break;
  243 + case '3':
  244 + uni.navigateTo({
  245 + url: `../purchaseLenses/purchaseLenses`,
  246 + success: res => {},
  247 + fail: () => {},
  248 + complete: () => {}
  249 + });
  250 + break;
  251 + case '4':
  252 + uni.navigateTo({
  253 + url: `../detailStandard/detailStandard_sun`,
  254 + success: res => {},
  255 + fail: () => {},
  256 + complete: () => {}
  257 + });
  258 + break;
  259 + default :
  260 + break
  261 + }
223 262 },
224 263 tabChange(e) {
225 264 if (this.current !== e) {
... ...
src/pages/index/index.vue
Diff comments   View file @f1da24f
... ... @@ -102,28 +102,34 @@ export default {
102 102 showRight: false,
103 103 indexArr: "",
104 104 valueArr: "",
105   - // //商品数据
106   - // goodsList: [
107   - // {
108   - // // goods_id: 0,
109   - // // img: "/static/img/goods/p1.jpg",
110   - // // name: "商品名称",
111   - // // originCost: "￥198",
112   - // // price: "￥168",
113   - // // slogan: "1235人浏览"
114   - // }
115   - // ],
116   - loadingText: "正在加载...",
  105 + loadingText: "~~到底了~~",
117 106 filterDropdownValue: [],
118   - filterData: []
  107 + filterData: [],
  108 + goodsList:[
  109 + { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
  110 + { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 },
  111 + { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 },
  112 + { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 },
  113 + { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
  114 + { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 },
  115 + { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 },
  116 + { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 },
  117 + { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
  118 + { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 }
  119 + ],
119 120 };
120 121 },
121 122 computed: {
122   - goodsList() {
123   - // 也可以从 getters 获取
124   - console.log(this.$store.getters.list);
125   - return this.$store.state.test.list;
126   - }
  123 + // goodsList() {
  124 + // // 也可以从 getters 获取
  125 + // console.log('list', this.$store.state.test.list);
  126 + // return this.$store.state.test.list;
  127 + // },
  128 + // categoryList(){
  129 + // console.log(this.$store.state.categoryOrder.categoryList);
  130 + // this.filterData = this.$store.state.categoryOrder.categoryList
  131 + // }
  132 +
127 133 },
128 134 filters: {
129 135 outData(value) {
... ... @@ -132,53 +138,20 @@ export default {
132 138 },
133 139 onLoad: function() {
134 140 store.dispatch('test/fetch');
135   - // uni.request({
136   - // url: "https://api.glass.xiuyetang.com/app/prod/list",
137   - // method: "post",
138   - // data: {
139   - // // text: 'uni.request'
140   - // },
141   - // header: {
142   - // // 'custom-header': 'hello', //自定义请求头信息
143   - // "Content-Type": "application/x-www-form-urlencoded"
144   - // // 'Content-Type':'multipart/form-data'
145   - // // 'Content-Type':'ext/plain'
146   - // },
147   - // timeout: 3000,
148   - // // dataType:'json'
149   - // // responseType:'text',
150   - // // sslVerify: true, //验证 ssl 证书
151   - // withCredentials: false, //跨域请求时是否携带凭证（cookies）
152   - // success: res => {
153   - // console.error("success status === > ", res);
154   - // this.goodsList = res.data.data;
155   - // // console.log('res.data', res.data);
156   - // // this.text = 'request success';
157   - // },
158   - // fail: res => {
159   - // console.log("fail status === > ", res);
160   - // },
161   - // complete: res => {
162   - // console.log("complete status === > ", res);
163   - // }
164   - // });
  141 + store.dispatch('categoryOrder/fetch')
  142 +
165 143 //定时器模拟ajax异步请求数据
166   - // setTimeout(()=>{
167   - // //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null
168   - // this.filterDropdownValue = [
169   - // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
170   - // [null,null], //第1个菜单选中 都不选中
171   - // [1], //第2个菜单选中 一级菜单的第1项
172   - // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
173   - // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
174   - // ];
  144 + setTimeout(()=>{
  145 + //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null
  146 + // this.filterDropdownValue = [
  147 + // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
  148 + // [null,null], //第1个菜单选中 都不选中
  149 + // [1], //第2个菜单选中 一级菜单的第1项
  150 + // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
  151 + // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
  152 + // ];
175 153 // this.filterData = data;
176   - // },100);
177   - // 模拟ajax请求子菜单数据。
178   - // setTimeout(()=>{
179   - // console.log('发起请求','ddddddd');
180   - // // this.filterData[1].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}];
181   - // },3000);
  154 + },100);
182 155 },
183 156 methods: {
184 157 showDrawer(e) {
... ... @@ -210,36 +183,7 @@ export default {
210 183 };
211 184 }
212 185 },
213   - onNavigationBarButtonTap(e) {
214   - this.showRight = !this.showRight;
215   - },
216   - //上拉加载，
217   - onReachBottom() {
218   - console.log("到底加载");
219   - let len = this.goodsList.length;
220   - if (len >= 30) {
221   - this.loadingText = "~~到底了~~";
222   - return false;
223   - } else {
224   - this.loadingText = "正在加载...";
225   - }
226   - let end_goods_id = this.goodsList[len - 1].goods_id;
227   - for (let i = 1; i <= 10; i++) {
228   - let goods_id = end_goods_id + i;
229   - let p = {
230   - goods_id: goods_id,
231   - img:
232   - "/static/img/goods/p" +
233   - (goods_id % 10 == 0 ? 10 : goods_id % 10) +
234   - ".jpg",
235   - name: "商品名称",
236   - originCost: "￥198",
237   - price: "￥168",
238   - slogan: "1235人付款"
239   - };
240   - this.goodsList.push(p);
241   - }
242   - }
  186 +
243 187 };
244 188 </script>
245 189  
... ...
src/pages/myOrder/components/OrderCard.vue
Diff comments   View file @f1da24f
... ... @@ -57,10 +57,10 @@
57 57 <view class="btn-type1">再次购买</view>
58 58 </view>
59 59 </view>
60   - </view>
61   -</template>
62   -
63   -<script>
  60 + </view>
  61 +</template>
  62 +
  63 +<script>
64 64 export default {
65 65 props: {
66 66 /**
... ... @@ -80,10 +80,14 @@
80 80 */
81 81 current:Number
82 82  
83   - },
84   - data() {
85   - return {
86   - };
  83 + },
  84 + onLoad() {
  85 + // console.log('dd');
  86 + console.log('order', this.props.order);
  87 + },
  88 + data() {
  89 + return {
  90 + };
87 91 },
88 92 methods:{
89 93 toRefundment(){
... ... @@ -94,11 +98,11 @@
94 98 complete: () => {}
95 99 });
96 100 }
97   - }
98   - }
99   -</script>
100   -
101   -<style lang="scss">
  101 + }
  102 + }
  103 +</script>
  104 +
  105 +<style lang="scss">
102 106 .card{
103 107 width: 670rpx;
104 108 height: 478rpx;
... ... @@ -206,5 +210,5 @@
206 210 margin-left: 20rpx;
207 211 }
208 212 }
209   - }
210   -</style>
  213 + }
  214 +</style>
... ...
src/pages/myOrder/myOrder.vue
Diff comments   View file @f1da24f
... ... @@ -13,7 +13,10 @@
13 13 </view>
14 14 </view>
15 15 <view class="orderList" >
16   - <view v-for="(order) in orderList" :key="order.orderId">
  16 + <view
  17 + v-for="(order) in orderList"
  18 + :key="order.orderId"
  19 + >
17 20 <OrderCard :order = "order" :current="current"></OrderCard>
18 21 </view>
19 22 </view>
... ... @@ -21,10 +24,12 @@
21 24 </view>
22 25 </template>
23 26 <script>
24   - import OrderCard from './components/OrderCard.vue'
  27 + import OrderCard from './components/OrderCard.vue';
  28 + import store from '@/store';
  29 +
25 30 export default {
26 31 components:{
27   - 'OrderCard':OrderCard
  32 + 'OrderCard': OrderCard
28 33 },
29 34 data() {
30 35 return {
... ... @@ -37,20 +42,32 @@
37 42 ],
38 43 current: 0,
39 44 //订单数据
40   - orderList:[
41   - { orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
42   - { orderId: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
43   - { orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:2 ,buyNum:1},
44   - { orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
45   - { orderId: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
46   - { orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
47   - { orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
48   - { orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1},
49   - { orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1}
50   - ],
51   -
  45 + // orderList:[
  46 + // { orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
  47 + // { orderId: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
  48 + // { orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:2 ,buyNum:1},
  49 + // { orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
  50 + // { orderId: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
  51 + // { orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
  52 + // { orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
  53 + // { orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1},
  54 + // { orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1}
  55 + // ],
52 56 };
53 57 },
  58 +
  59 + onLoad: function() {
  60 + store.dispatch('myOrder/getList', {
  61 + uid: "1",
  62 + way: "0",
  63 + });
  64 + },
  65 + computed: {
  66 + orderList() {
  67 + console.log('orderList', this.$store.state.myOrder.orderlist);
  68 + return this.$store.state.myOrder.orderlist;
  69 + }
  70 + },
54 71 methods:{
55 72 onClickItem(e) {
56 73 if (this.current !== e) {
... ...
src/pages/myOrderPaying/myOrderPaying.vue
Diff comments   View file @f1da24f
1 1 <template>
2   - <view class="content">
3   - <view class="header">
4   - <view class="header-name">
5   - <navigator open-type="navigateBack" hover-class="navigator-hover">
6   - <image src="/static/back.png"></image>
7   - </navigator>
8   - <text>我的订单</text>
9   - </view>
  2 +
  3 + <view class="content">
  4 + <view class="order-hr"></view>
  5 + <view class="order-time">
  6 + <text>请在</text>
  7 + <!-- <text class="p2"></text> -->
  8 + <uni-countdown color="#EC5D3B" splitor-color="#EC5D3B" :show-day="false"
  9 + :hour="0" :minute="59" :second="58" style="margin: 36rpx 20rpx 0 20rpx"></uni-countdown>
  10 + <text>内完成付款</text>
10 11 </view>
11   - <scroll-view scroll-y class="scroll-view" :style="{ height: scrollHeight?1000:800 + 'px' }">
12   - <view class="order-hr"></view>
13   - <view class="order-time">
14   - <text>请在</text>
15   - <text class="p2">00:59:58 </text>
16   - <text>内完成付款</text>
17   - </view>
  12 + <view class="order">
18 13 <view class="order-user">
19 14 <view class="order-user-head">
20 15 <text class="p1">钱大大</text>
... ... @@ -30,13 +25,16 @@
30 25 <image src="../../static/myorder-paying-pic.png"></image>
31 26 <view class="order-info-head-r">
32 27 <text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text>
33   - <text class="p2">规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻</text>
34   - <text class="p3">￥180</text>
  28 + <view class="p2" style="margin: 0;">
  29 + 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻
  30 + <!-- <view class="arrow"></view> -->
  31 + </view>
  32 + <text class="p3"><span>￥180</span><span class="p4">X1</span></text>
35 33 </view>
36 34 </view>
37   - <view class="order-info-goodsnum">
  35 +<!-- <view class="order-info-goodsnum">
38 36 <text>X1</text>
39   - </view>
  37 + </view> -->
40 38 <text class="order-info-freight">
41 39 <text class="p1">运费</text>
42 40 <text class="p2">0.00</text>
... ... @@ -61,7 +59,7 @@
61 59 <text>联系客服</text>
62 60 </view>
63 61 </view>
64   - </scroll-view>
  62 + </view>
65 63 <view class="order-confim">
66 64 <button class="b1">取消订单</button>
67 65 <button class="b2">立即支付</button>
... ... @@ -70,7 +68,11 @@
70 68 </template>
71 69  
72 70 <script>
  71 + import UniCountdown from '../../components/UniCountdown/UniCountdown.vue'
73 72 export default {
  73 + components: {
  74 + UniCountdown
  75 + },
74 76 data() {
75 77 return {
76 78 scrollHeight: false,
... ... @@ -88,39 +90,13 @@
88 90 flex-direction: column;
89 91 justify-content: center;
90 92 align-items: center;
  93 + background-color: #f2f2f2;
91 94 }
92 95  
93   - .header{
94   - display: flex;
95   - flex-direction: column;
96   - align-items: center;
97   - justify-content: center;
98   - width: 100%;
99   - height: 44px;
100   - position: fixed;
101   - top: 0;
102   - z-index: 999;
103   - background-color: #fff;
104   - .header-name{
105   - display: flex;
106   - align-items: center;
107   - width: 670rpx;
108   - image {
109   - width: 11px;
110   - height: 18px;
111   - }
112   - text {
113   - // font-family: PingFangSC-Regular;
114   - font-size: 36rpx;
115   - color: #333333;
116   - letter-spacing: -0.34px;
117   - margin: 0 0 10rpx 54rpx;
118   - }
119   - }
120   - }
121 96  
122   - .scroll-view {
123   - // height: 1760rpx; // 测试
  97 + .order {
  98 + min-height: 1196rpx;
  99 + margin-bottom: 112rpx;
124 100 background: #F2F2F2;
125 101 }
126 102 .order-hr {
... ... @@ -222,8 +198,30 @@
222 198 text{
223 199 display: block;
224 200 }
  201 + // .arrow{
  202 + // width: 0;
  203 + // height: 0;
  204 + // border-left: 5px transparent;
  205 + // border-right: 5px transparent;
  206 + // border-top: 5px #979797;
  207 + // border-bottom: 0 transparent;
  208 + // border-style: solid;
  209 + // position: relative;
  210 + // // transform: scaleY(-1);
  211 + // }
  212 + // .arrow::after{
  213 + // content: '';
  214 + // position: absolute;
  215 + // top: -6.5px;
  216 + // left: -5px;
  217 + // border-left: 5px transparent;
  218 + // border-right: 5px transparent;
  219 + // border-top: 5px #FFFFFF;
  220 + // border-bottom: 0 transparent;
  221 + // border-style: solid;
  222 + // }
225 223 .p1 {
226   - height: 40px;
  224 + min-height: 40px;
227 225 // font-family: PingFangSC-Regular;
228 226 font-size: 14px;
229 227 color: #333333;
... ... @@ -246,21 +244,27 @@
246 244 color: #FF6B4A;
247 245 letter-spacing: -0.26px;
248 246 }
  247 + .p4{
  248 + font-size: 12px;
  249 + color: #999999;
  250 + letter-spacing: -0.23px;
  251 + margin-left: 10px;
  252 + }
249 253 }
250 254  
251 255 }
252   - .order-info-goodsnum {
253   - display: flex;
254   - align-items: center;
255   - justify-content: flex-end;
256   - text {
257   - margin-right: 44rpx;
258   - // ont-family: PingFangSC-Regular;
259   - font-size: 12px;
260   - color: #999999;
261   - letter-spacing: -0.23px;
262   - }
263   - }
  256 + // .order-info-goodsnum {
  257 + // display: flex;
  258 + // align-items: center;
  259 + // justify-content: flex-end;
  260 + // text {
  261 + // margin-right: 44rpx;
  262 + // // ont-family: PingFangSC-Regular;
  263 + // font-size: 12px;
  264 + // color: #999999;
  265 + // letter-spacing: -0.23px;
  266 + // }
  267 + // }
264 268 .order-info-freight {
265 269 display: block;
266 270 margin-left: 40rpx;
... ...
src/pages/predelivery/predelivery.vue
Diff comments   View file @f1da24f
... ... @@ -0,0 +1,152 @@
  1 +<template>
  2 + <view class="container">
  3 + <view v-for="(items) in form" :key="items.key" class="order">
  4 + <view class="order_number">订单号：{{items.orderNum}}<span>待发货</span></view>
  5 + <view class="order_detail">
  6 + <view class="detail_img"><image v-bind:src="items.img"></image></view>
  7 + <view class="detail_zi">
  8 + <view class="zi_name">{{items.name}}</view>
  9 + <view class="zi_standard">规格：{{items.standard}}</view>
  10 + <view class="zi_preprice">￥{{items.preprice}}<span>X{{items.number}}</span></view>
  11 + </view>
  12 + </view>
  13 + <view class="now_price">实付：<span>￥{{items.nowprice}}</span></view>
  14 + <view class="clear"></view>
  15 + <view class="button">
  16 + <view class="button1">申请退款</view>
  17 + <view class="button2">提醒发货</view>
  18 + </view>
  19 + </view>
  20 + </view>
  21 +</template>
  22 +
  23 +<script>
  24 +export default {
  25 + data(){
  26 + return{
  27 + form:[
  28 + {
  29 + key: 0,
  30 + name:'商品名称',
  31 + standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',
  32 + img: '/static/img/detail/delivery.png',
  33 + preprice: 180,
  34 + number:1,
  35 + orderNum: 2034867958596334,
  36 + nowprice: 110,
  37 + }
  38 + ]
  39 +
  40 + }
  41 + }
  42 +}
  43 +</script>
  44 +
  45 +<style lang="scss">
  46 +.container{
  47 + width: 100%;
  48 + height: 100%;
  49 + background: #F2F2F2;
  50 + height: 700px;
  51 + //要获取屏幕大小
  52 +}
  53 +
  54 +.order{
  55 + background: #FFFFFF;
  56 + width: 90%;
  57 + height: 450rpx;
  58 + margin: 0 auto;
  59 + padding: 40rpx;
  60 + box-sizing: border-box;
  61 + border-radius: 5px;
  62 +}
  63 +.order_number{
  64 + color: #999999;
  65 + font-size: 12px;
  66 + font-family: "PingFangSC-Regular";
  67 + span{
  68 + font-family: PingFangSC-Regular;
  69 + font-size: 14px;
  70 + color: #FF6B4A;
  71 + letter-spacing: -0.26px;
  72 + line-height: 18px;
  73 + float: right;
  74 + }
  75 +}
  76 +.order_detail{
  77 + display: flex;
  78 + justify-content: space-around;
  79 + margin-top: 12px;
  80 +}
  81 +.detail_img image{
  82 + width: 188rpx;
  83 + height: 188rpx;
  84 +}
  85 +.detail_zi{
  86 + font-family: PingFangSC-Regular;
  87 + width: 55%;
  88 + height: 100%;
  89 + view{
  90 + margin-bottom: 20rpx;
  91 + }
  92 + .zi_name{
  93 + font-size: 14px;
  94 + color: #333333;
  95 + letter-spacing: -0.26px;
  96 + line-height: 18px;
  97 + }
  98 + .zi_standard{
  99 + font-size: 12px;
  100 + color: #999999 ;
  101 + }
  102 + .zi_preprice{
  103 + font-size: 14px;
  104 + color: #FF6B4A;
  105 + span{
  106 + float: right;
  107 + font-size: 12px;
  108 + color: #999999;
  109 + }
  110 + }
  111 +}
  112 +.now_price{
  113 + font-size: 14px;
  114 + color: #333333;
  115 + float: right;
  116 + span{
  117 + font-size: 14px;
  118 + color: #FF6B4A ;
  119 + }
  120 +}
  121 +.clear{
  122 + clear: both;
  123 +}
  124 +.button{
  125 + display: flex;
  126 + justify-content: flex-end;
  127 + margin-top: 14px;
  128 + view{
  129 + width: 156rpx;
  130 + height: 48rpx;
  131 + border-radius: 12px;
  132 + font-size: 12px;
  133 + text-align: center;
  134 + line-height: 20px;
  135 + }
  136 + .button1{
  137 + border: 1px solid #FF6B4A;
  138 + font-family: PingFangSC-Regular;
  139 + color: #FF6B4A;
  140 + letter-spacing: -0.23px;
  141 + margin-right: 30rpx;
  142 + }
  143 + .button2{
  144 + border: 1px solid #FF6B4A;
  145 + background: #FF6B4A;
  146 + font-family: PingFangSC-Regular;
  147 + color: #FFFFFF;
  148 + letter-spacing: -0.23px;
  149 +
  150 + }
  151 +}
  152 +</style>
0 153 \ No newline at end of file
... ...
src/pages/refundment/refundWays.vue
Diff comments   View file @f1da24f
... ... @@ -0,0 +1,152 @@
  1 +<template>
  2 + <view class="container" v-bind:style="{height: curheight+'px'}">
  3 + <view class="refund" v-for="(items) in refund" :key="items.key">
  4 + <view class="detail">
  5 + <view class="detail_img"><image v-bind:src="items.img"></image></view>
  6 + <view class="detail2">
  7 + <view class="detail_name">{{items.name}}</view>
  8 + <view class="detail_standard">规格：{{items.standard}}</view>
  9 + <view class="detail_price">
  10 + <span>￥{{items.price}}</span>
  11 + <span>X{{items.number}}</span>
  12 + </view>
  13 + </view>
  14 + </view>
  15 + <view class="refund_price">
  16 + <span class="refund_price1">退款金额</span>
  17 + <span class="refund_price2">￥{{items.refundprice}}</span>
  18 + </view>
  19 + <view class="refund_reason">
  20 + <view>仅退款<image src="/static/img/detail/xiala.png"></image></view>
  21 + </view>
  22 + <view class="refund_reason">
  23 + <view>退款退货<image src="/static/img/detail/xiala.png"></image></view>
  24 + </view>
  25 + <view class="refund_reason">
  26 + <view>换货<image src="/static/img/detail/xiala.png"></image></view>
  27 + </view>
  28 + </view>
  29 + </view>
  30 +</template>
  31 +
  32 +<script>
  33 +export default {
  34 + //获取浏览器高度
  35 + beforeMount(height){
  36 + var h = document.documentElement.clientHeight || document.body.clientHeight;
  37 + this.curheight = h-44;
  38 +
  39 + },
  40 + data(){
  41 + return{
  42 + curheight:0, //浏览器高度
  43 + refund:[
  44 + {
  45 + key:0,
  46 + img:'/static/img/detail/d1.png',
  47 + name:'商品名称',
  48 + standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',
  49 + price: 180,
  50 + number: 1,
  51 + refundprice: 110,
  52 + refund_img:'/static/img/detail/refund_img.png',
  53 + }
  54 + ],
  55 + }
  56 + }
  57 +}
  58 +</script>
  59 +
  60 +<style lang="scss">
  61 +
  62 +.container{
  63 + background: #F2F2F2;
  64 + padding-top: 10px;
  65 + box-sizing: border-box;
  66 +}
  67 +.refund{
  68 + width: 90%;
  69 + height: 300px;
  70 + margin: 0 auto;
  71 + background: #FFFFFF;
  72 + box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);
  73 + border-radius: 8px;
  74 + padding: 14px;
  75 + box-sizing: border-box;
  76 +}
  77 +.detail{
  78 + display: flex;
  79 + justify-content: space-between;
  80 + font-family: PingFangSC-Regular;
  81 + margin-bottom: 20px;
  82 + .detail2{
  83 + width: 64%;
  84 + view{
  85 + margin-bottom: 8px;
  86 + }
  87 + .detail_name{
  88 + font-size: 14px;
  89 + color:#333333;
  90 + }
  91 + .detail_standard{
  92 + font-size: 12px;
  93 + color: #999999;
  94 + }
  95 + .detail_price{
  96 + font-size: 14px;
  97 + color: #999999;
  98 + display: flex;
  99 + justify-content: space-between;
  100 + }
  101 + }
  102 + .detail_img{
  103 + width: 188rpx;
  104 + height: 188rpx;
  105 + border-radius: 40px;
  106 + image{
  107 + width: 100%;
  108 + height: 100%;
  109 + }
  110 + }
  111 +}
  112 +
  113 +.refund_price{
  114 + font-family: PingFangSC-Semibold;
  115 + font-size: 14px;
  116 + color: #333333;
  117 + letter-spacing: -0.26px;
  118 + line-height: 18px;
  119 + margin-bottom: 26px;
  120 + .refund_price1{
  121 + font-weight: bold;
  122 + margin-right: 16px;
  123 + }
  124 + .refund_price2{
  125 + color: #FF6B4A;
  126 + }
  127 +}
  128 +.refund_reason{
  129 + margin-top: 16px;
  130 + margin-bottom: 16px;
  131 + font-family: PingFangSC-Regular;
  132 + font-size: 12px;
  133 + color: #333333;
  134 + letter-spacing: -0.23px;
  135 + line-height: 18px;
  136 + view{
  137 + display: inline-block;
  138 + font-size: 12px;
  139 + color: #333333;
  140 + letter-spacing: -0.23px;
  141 + line-height: 18px;
  142 + width: 90%;
  143 + image{
  144 + width: 30rpx;
  145 + height: 24rpx;
  146 + float: right;
  147 + }
  148 + }
  149 +}
  150 +
  151 +
  152 +</style>
0 153 \ No newline at end of file
... ...
src/pages/user/user.vue
Diff comments   View file @f1da24f
... ... @@ -22,19 +22,19 @@
22 22 </view>
23 23 </view>
24 24 <view class="orderBody">
25   - <view class="item,waitPay" @click=toMyOrderPaying>
26   - <image src="../../static/waitPay.png" mode="aspectFill"></image>
  25 + <view class="item waitPay" @click="toMyOrderPaying">
  26 + <image src="../../static/waitDeliver.png" mode="aspectFill"></image>
27 27 <text>待付款</text>
28 28 </view>
29   - <view class="item,waitDeliver" @click=toPredelivery>
  29 + <view class="item waitDeliver" @click="toPredelivery" >
30 30 <image src="../../static/waitDeliver.png" mode="aspectFill"></image>
31 31 <text>待发货</text>
32 32 </view>
33   - <view class="item,waitReceive">
  33 + <view class="item waitReceive" @click="torefunProgress">
34 34 <image src="../../static/waitReceive.png" mode="aspectFill"></image>
35 35 <text>待收货</text>
36 36 </view>
37   - <view class="item,service">
  37 + <view class="item service" @click="torefundment">
38 38 <image src="../../static/service.png" mode="aspectFill"></image>
39 39 <text>退换/售后</text>
40 40 </view>
... ... @@ -72,7 +72,7 @@
72 72  
73 73 //商品数据
74 74 goodsList:[
75   - { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
  75 + { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
76 76 { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
77 77 { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
78 78 { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
... ... @@ -93,7 +93,7 @@
93 93 methods: {
94 94 toMyOrder(){
95 95 uni.navigateTo({
96   - url: '../myOrder/myOrder',
  96 + url: '../myOrder/myOrder?current=0',
97 97 success: res => {},
98 98 fail: () => {},
99 99 complete: () => {}
... ... @@ -101,7 +101,7 @@
101 101 },
102 102 toPredelivery(){
103 103 uni.navigateTo({
104   - url: '../Predelivery/Predelivery',
  104 + url: '../myOrder/myOrder?current=2',
105 105 success: res => {},
106 106 fail: () => {},
107 107 complete: () => {}
... ... @@ -109,11 +109,21 @@
109 109 },
110 110 toMyOrderPaying(){
111 111 uni.navigateTo({
112   - url: '../myorder-paying/myorder-paying',
  112 + url: '../myOrder/myOrder?current=1',
113 113 success: res => {},
114 114 fail: () => {},
115 115 complete: () => {}
116 116 });
  117 + },
  118 + torefundment(){
  119 + uni.navigateTo({
  120 + url:'../refundment/refundment',
  121 + })
  122 + },
  123 + torefunProgress(){
  124 + uni.navigateTo({
  125 + url:'../refundProgress/refundProgress'
  126 + })
117 127 }
118 128 }
119 129 }
... ... @@ -240,6 +250,7 @@
240 250 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
241 251 border-radius: 6px;
242 252 border-radius: 6px;
  253 + width: 100%;
243 254 .title{
244 255 display: flex;
245 256 flex-direction: row;
... ...
src/static/img/detail/Kuang/g1.png
Diff comments   View file @f1da24f

9.28 KB
src/static/img/detail/Kuang/g2.png
Diff comments   View file @f1da24f

8.61 KB
src/static/img/detail/Kuang/g3.png
Diff comments   View file @f1da24f

7.95 KB
src/static/img/detail/Kuang/s1.png
Diff comments   View file @f1da24f

7.61 KB
src/static/img/detail/Kuang/s2.png
Diff comments   View file @f1da24f

7.83 KB
src/static/img/detail/Kuang/s3.png
Diff comments   View file @f1da24f

7.28 KB
src/static/img/detail/Kuang/s4.png
Diff comments   View file @f1da24f

7.69 KB
src/static/img/detail/Kuang/s5.png
Diff comments   View file @f1da24f

7.39 KB
src/static/img/detail/Kuang/s6.png
Diff comments   View file @f1da24f

7.27 KB
src/static/img/detail/Kuang/s7.png
Diff comments   View file @f1da24f

7.6 KB
src/static/img/detail/Kuang/sun_jp.png
Diff comments   View file @f1da24f

2.5 KB
src/static/img/detail/sun_glass.png
Diff comments   View file @f1da24f

25.2 KB
src/store/modules/categoryOrder.js
Diff comments   View file @f1da24f
... ... @@ -0,0 +1,40 @@
  1 + import urlAlias from '../url';
  2 + import request from '../request';
  3 +
  4 + const {
  5 + category
  6 + } = urlAlias;
  7 +
  8 +const state = {
  9 + categoryList: [],
  10 +};
  11 +
  12 +const mutations = {
  13 + INIT: (state, categoryList) => {
  14 + state.categoryList = categoryList;
  15 + },
  16 +};
  17 +
  18 +const actions = {
  19 + fetch({ commit }, param) {
  20 + request({
  21 + url: category,
  22 + success: (res) => {
  23 + commit('INIT', res.data.data)
  24 + },
  25 + fail: (res) => {
  26 + console.log("fail status === > ", res);
  27 + },
  28 + complete: (res) => {
  29 + console.log("complete status === > ", res);
  30 + },
  31 + })
  32 + },
  33 +};
  34 +
  35 +export default {
  36 + namespaced: true,
  37 + state,
  38 + mutations,
  39 + actions,
  40 +};
... ...
src/store/modules/myOrder.js
Diff comments   View file @f1da24f
... ... @@ -0,0 +1,107 @@
  1 +import urlAlias from '../url';
  2 +import request from '../request';
  3 +
  4 +const {
  5 + orderList
  6 +} = urlAlias;
  7 +
  8 +const data = {
  9 + data: [
  10 + {
  11 + finished_time: null,
  12 + is_refound: "0",
  13 + mch_id: "1436019502",
  14 + money_of_dcw: "0",
  15 + money_of_partner: "0",
  16 + money_of_shop: "0",
  17 + orderJudge: false,
  18 + order_info: {
  19 + address:{
  20 + cityName: "镇江市",
  21 + countyName: "丹阳市",
  22 + detailInfo: "延陵镇柳茹村卫生室附近秀野堂农业发展有限公司",
  23 + errMsg: "chooseAddress:ok",
  24 + nationalCode: "321181",
  25 + postalCode: "212300",
  26 + provinceName: "江苏省",
  27 + telNumber: "15896379277",
  28 + userName: "点餐汪客服",
  29 + },
  30 + cartinfo:['11', '12'],
  31 + keyname: "1_1587129366",
  32 + lefttime: 179995,
  33 + list:[
  34 + {
  35 + cart_id: "11",
  36 + imgUrl: "https://glass.xiuyetang.com//upload_jk/4/4_0_3FDA03.jpg",
  37 + img_index_url: null,
  38 + memo: "志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流，01-8701",
  39 + mp_id: "1",
  40 + nowPrice: 100,
  41 + num: "2",
  42 + oldPrice: "0",
  43 + p_discount: "1",
  44 + p_name: "01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流",
  45 + p_root_index: "1",
  46 + p_sale_price: "0",
  47 + peopleName: "me",
  48 + pics: '',
  49 + pid: "4",
  50 + sk_id: "38",
  51 + },
  52 + ],
  53 + orderDesc: "总共包括有：01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流在内的1件商品",
  54 + total_fee: 100
  55 + },
  56 + partner_uid: "0",
  57 + pay_cate: "2020",
  58 + pay_id: "3",
  59 + pay_time: "2020-04-17 21:16:12",
  60 + pay_wood_desc: "在【非常戴镜】的微信付款凭证",
  61 + pay_wood_id: "fcdj-1-1_1587129366",
  62 + prepay_id: "wx172116124528226bf1a8adad1662456500",
  63 + re_check_staus: "0",
  64 + shopid: "0",
  65 + split_userid: "0",
  66 + status: "1",
  67 + total_fee: "100",
  68 + uid: "1",
  69 + }
  70 + ],
  71 + msg: "订单列表",
  72 + status: 0,
  73 +}
  74 +
  75 +const state = {
  76 + orderList: [],
  77 +};
  78 +
  79 +const mutations = {
  80 + INIT: (state, data) => {
  81 + state.orderList = data;
  82 + },
  83 +};
  84 +
  85 +const actions = {
  86 + getList({ commit }, param) {
  87 + request({
  88 + url: orderList,
  89 + data: param,
  90 + success: (res) => {
  91 + const resData = {
  92 + ...res,
  93 + data,
  94 + }
  95 + console.log('data.data', resData.data.data);
  96 + commit("INIT", resData.data.data);
  97 + },
  98 + })
  99 + }
  100 +}
  101 +
  102 +export default {
  103 + namespaced: true,
  104 + state,
  105 + mutations,
  106 + actions,
  107 +}
0 108 \ No newline at end of file
... ...
src/store/modules/test.js
Diff comments   View file @f1da24f
  1 + import urlAlias from '../url';
  2 + import request from '../request';
  3 +
  4 + const {
  5 + shopList
  6 + } = urlAlias;
  7 +
1 8 const state = {
2 9 list: [],
3 10 };
... ... @@ -10,26 +17,38 @@ const mutations = {
10 17  
11 18 const actions = {
12 19 fetch({ commit }, param) {
13   - uni
14   - .request({
15   - url: "https://api.glass.xiuyetang.com/app/prod/list",
16   - method: "post",
17   - data: {},
18   - header: {
19   - "Content-Type": "application/x-www-form-urlencoded",
20   - },
21   - timeout: 3000,
22   - withCredentials: false,
23   - success: (res) => {
24   - commit('INIT', res.data.data)
25   - },
26   - fail: (res) => {
27   - console.log("fail status === > ", res);
28   - },
29   - complete: (res) => {
30   - console.log("complete status === > ", res);
31   - },
32   - });
  20 + request({
  21 + url: shopList,
  22 + success: (res) => {
  23 + commit('INIT', res.data.data)
  24 + },
  25 + fail: (res) => {
  26 + console.log("fail status === > ", res);
  27 + },
  28 + complete: (res) => {
  29 + console.log("complete status === > ", res);
  30 + },
  31 + })
  32 + // uni
  33 + // .request({
  34 + // url: "https://api.glass.xiuyetang.com/app/prod/list",
  35 + // method: "post",
  36 + // data: {},
  37 + // header: {
  38 + // "Content-Type": "application/x-www-form-urlencoded",
  39 + // },
  40 + // timeout: 3000,
  41 + // withCredentials: false,
  42 + // success: (res) => {
  43 + // commit('INIT', res.data.data)
  44 + // },
  45 + // fail: (res) => {
  46 + // console.log("fail status === > ", res);
  47 + // },
  48 + // complete: (res) => {
  49 + // console.log("complete status === > ", res);
  50 + // },
  51 + // });
33 52 },
34 53 };
35 54  
... ...
src/store/request.js
Diff comments   View file @f1da24f
... ... @@ -0,0 +1,34 @@
  1 +const DOMAIN = 'https://api.glass.xiuyetang.com';
  2 +
  3 +export default async function request({
  4 + url,
  5 + method = "post",
  6 + data = {},
  7 + header = {
  8 + "Content-Type": "application/x-www-form-urlencoded",
  9 + },
  10 + timeout = 3000,
  11 + withCredentials = false, // 跨域请求时是否携带凭证（cookies）
  12 + // sslVerify: true, // 验证 ssl 证书
  13 + success,
  14 + fail = (res) => {
  15 + console.log("fail status === > ", res);
  16 + },
  17 + complete = (res) => {
  18 + console.log("complete status === > ", res);
  19 + },
  20 +}) {
  21 + console.log("DOMAIN", DOMAIN, url);
  22 + uni
  23 + .request({
  24 + url: DOMAIN + url,
  25 + method,
  26 + data,
  27 + header,
  28 + timeout,
  29 + withCredentials,
  30 + success,
  31 + fail,
  32 + complete,
  33 + })
  34 +}
0 35 \ No newline at end of file
... ...
... ... @@ -0,0 +1,9 @@
  1 +const urlAlias = {
  2 + // 获取首页商品列表
  3 + shopList: '/app/prod/list',
  4 +
  5 + // 获取首页商品列表
  6 + category: '/app/prod/category',
  7 +}
  8 +
  9 +export default urlAlias;
... ...